5 ms·

Can you elaborate what you mean by "load and reference each weight in your stylesheet" for us who aren't CSS savvy?

by hndl 13y ago

8ig8 13y ago
Chris Coyier explains it here: http://css-tricks.com/watch-your-font-weight/ http://css-tricks.com/watch-your-font-weight/ Edit: Another explanation: http://alistapart.com/article/say-no-to-faux-bold http://alistapart.com/article/say-no-to-faux-bold
elwell 13y ago
the way most people do it is to use font-family: blah; on every class that needs it. this is because @font-face isn't supported completely when using simply font-weight: blah; to differentiate between different @font-face family groups.
- calinet6 13y ago
  If you define your weights correctly when loading your @font-faces, then weight works as expected: http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/ http://www.456bereastreet.com/archive/201012/font-face_tip_d...
  - elwell 13y ago
    That technique is actually what I'm referring to. I've seen that not work before; sorry don't have details. I just don't mess with that anymore and instead use every font-family explicitly when needed.
ryanwhitney 13y ago
A separate font file is required for every style and weight of a typeface that you want to use. For example, to use four unique styles of a typeface on a site (say Regular, Italic, Bold, and Bold Italic), you would need to import four font files (ClearSans-Regular, ClearSans-Italic, ClearSans-Bold, ClearSans-BoldItalic). If you give a chunk of type a style or weight that you haven't loaded the appropriate font file for, browsers will add weight to or slant the text themselves. ("faux-bold", "faux-italic"). This gives you ugly, rough, less readable text that counteracts the primary reasons to use a web font in the first place. Default CSS styles (H1 automatically adding font-weight: bold;) can also cause this in some cases. [See link] There's two main (maybe three) approaches to implementing them correctly, Laura Franz does a good job of describing them here: http://coding.smashingmagazine.com/2013/02/14/setting-weights-and-styles-at-font-face-declaration/ http://coding.smashingmagazine.com/2013/02/14/setting-weight...

Can you elaborate what you mean by "load and reference each weight in your stylesheet" for us who aren't CSS savvy?

by hndl 13y ago

Can you elaborate what you mean by "load and reference each weight in your stylesheet" for us who aren't CSS savvy?

8ig8 13y ago

Chris Coyier explains it here: http://css-tricks.com/watch-your-font-weight/ http://css-tricks.com/watch-your-font-weight/ Edit: Another explanation: http://alistapart.com/article/say-no-to-faux-bold http://alistapart.com/article/say-no-to-faux-bold

elwell 13y ago

the way most people do it is to use font-family: blah; on every class that needs it. this is because @font-face isn't supported completely when using simply font-weight: blah; to differentiate between different @font-face family groups.

calinet6 13y ago
If you define your weights correctly when loading your @font-faces, then weight works as expected: http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/ http://www.456bereastreet.com/archive/201012/font-face_tip_d...
- elwell 13y ago
  That technique is actually what I'm referring to. I've seen that not work before; sorry don't have details. I just don't mess with that anymore and instead use every font-family explicitly when needed.

ryanwhitney 13y ago

A separate font file is required for every style and weight of a typeface that you want to use. For example, to use four unique styles of a typeface on a site (say Regular, Italic, Bold, and Bold Italic), you would need to import four font files (ClearSans-Regular, ClearSans-Italic, ClearSans-Bold, ClearSans-BoldItalic). If you give a chunk of type a style or weight that you haven't loaded the appropriate font file for, browsers will add weight to or slant the text themselves. ("faux-bold", "faux-italic"). This gives you ugly, rough, less readable text that counteracts the primary reasons to use a web font in the first place. Default CSS styles (H1 automatically adding font-weight: bold;) can also cause this in some cases. [See link] There's two main (maybe three) approaches to implementing them correctly, Laura Franz does a good job of describing them here: http://coding.smashingmagazine.com/2013/02/14/setting-weights-and-styles-at-font-face-declaration/ http://coding.smashingmagazine.com/2013/02/14/setting-weight...