![]() In particular, note the proper italic font includes a variant lowercase ‘a’ without the ascender, and bold characters have an even thickness to the stroke, rather than the wider vertical strokes on the faux-bold. The browser’s brute-force approach to creating these faux styles leaves a lot to be desired. It solves this by creating a faux-bold style by stretching the letters horizontally, and a faux-italic style by slanting the letters.įig a: comparison of faux browser styles and true typefaces The problem, as you can see in this screenshot, is that if you only load one font into the family, then the browser doesn’t know what to do when it’s asked to render a bold or italic section using that font. In CSS terms, you load a font file using declarations, which append that font to a font-family. eg, garamond-bold.ttf is the font copy of Garamond Bold, a typeface from the Garamond family. ![]() (If you’re not interested in an explanation of the problem or the bad solution recommended by most font-embedding services, go ahead and skip down to The Right Solution.) The Problemįirst, to clarify: A font is a file containing a particular typeface, which is a particular weight or style of a type family. In this article, I’ll walk you through how to properly load your font files to avoid the browser’s faux-italic and faux-bold styles. ![]() ![]() Did you know that if you declare a custom font using the browser will try to fake the bold and italic styles if it can’t find them? This is a clever little feature that avoids a scenario where a themer specifies a font and is then confused that bold and italics don’t work, but it can be very confusing if you actually have a bold or italic version of the font. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
January 2023
Categories |