css - Lato Hairline Light doesn't render in firefox -
but in chrome!
css:
h3 { font-family: 'lato hairline light'; font-size: 20px; text-align: center; opacity: 0; color: lime; animation-fill-mode: forwards; animation-name: fadein; animation-timing-function: ease-in; animation-duration: 1s; animation-delay: 1s; }
renders fine in chrome:
but renders default font in firefox:
this happens "light" version of lato hairline. if use "lato" or "lato hairline", renders fine in both browsers.
why happen , how can fix it?
edit: added
@font-face { font-family: 'lato hairline'; src: url('lato-hairline.ttf') format('truetype'); }
edit2: "lato hairline" font-weight set normal not same "lato hairline light".
here's "lato hairline light" + bold:
here's "lato hairline" + bold:
here's "lato hairline" normal:
here's "lato" + light:
first 1 one displayed in chrome , 1 want display.
i believe it's because since it's h3, firefox applying artificial «bold effect» , since cannot render properly, messes font. loading font google font? if so, it's better use font weight associated it. if using fontface font downloaded on own server, should create 1 font-family , create font-weight values relative font. i.e
@font-face { font-family: 'droidserif'; src: url('droidserif-regular-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'droidserif'; src: url('droidserif-italic-webfont.ttf') format('truetype'); font-weight: normal; font-style: italic; } @font-face { font-family: 'droidserif'; src: url('droidserif-bold-webfont.ttf') format('truetype'); font-weight: bold; font-style: normal; } @font-face { font-family: 'droidserif'; src: url('droidserif-bolditalic-webfont.ttf') format('truetype'); font-weight: bold; font-style: italic; }
from tutorial: http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/
it's easier , safer browser. often, chrome understanding more thing should , firefox bringing reality in face eheh
if fontface, show how include them website? problem file not being accepted firefox
if it's google font, way:
add in head
section
<link href='http://fonts.googleapis.com/css?family=lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
then, have this:
.lato-thin{ font-family: 'lato', sans-serif; font-weight: 100; }
look @ page have more info: https://www.google.com/fonts#quickuseplace:quickuse
here js fiddle, javascript in fiddle same thing pasting link in css. tested on firefox , works https://jsfiddle.net/3db60oh7/
Comments
Post a Comment