I have talked about web fonts before, but I ran into a new issue that made me revisit the topic.
The problem came from using a @font-font kit from Font Squirrel. What happened was that I ended up getting “Faux” bold and italics on my web-page. The solution suggested from the Demo.html page that comes from the kit is truly unacceptable if you want your CSS to be sanely maintainable.
What it comes down to is you would need to specify unique font-family anywhere you want bold or italics. You lose the ability for “cascading” and inheritance – some of the things that make CSS nice.
See the screen cast for more information. Here is a Table of Contents in case you don’t need the intro to web fonts that I provide in the beginning:
0:00 to 2:55 Using Google Web Fonts
2:55 to 4:55 Getting fonts from FontSquirrel
4:55 to 6:15 Adding fonts to CSS and showing the ‘Faux’ problem
6:15 to end Solving the ‘Faux’ problem and setting up different weights of your font
See my Github repository for the solution and demo code.
Here is the important snippet of the CSS defining the fonts.
The trick is to call all the definitions the same name. Then specify with “font-weight” or “font-style” the weight and style you want it to represent.
It is quite simple once you “get” it. I would never have thought to do this if I hadn’t found this article to explain the solution.
By the way, on this website I use Myriad Pro hosted by TypeKit. When you use a service like this, just like with Google, they handle the bold and italics better, so you don’t need to worry about this issue.