In the process of designing this site, I decided to use some custom fonts using the @font-face CSS attribute. In comparison to some of the other web font options (Cufon, sIFR, FLIR), the @font-face CSS method is simple, easy to implement and well supported in most modern browsers. Although the Google Font API is probably the most well-known web font library, I decided to roll my own kit from Font Squirrel and self-host the fonts. The really nice part about Font Squirrel is that they provide all of the different font formats (TTF, EOT, OTF, and SVG), compatible with every browser on the market.
For all of my H1-H6 headings, I use the following markup:
I then load the font in like I would any other family:
Everything looked great besides one small, yet extremely annoying, caveat.
I noticed in Firefox and Opera that for a split second, just before the page finished rendering, unstyled text would be displayed. This drove me crazy. Some subsequent Googling let me know that this was common, often referred to as FOUT (Flash of Unstyled Text). The fix was pretty trivial. What you can do is use the WebFont Loader from Google & Typekit.
- Using the WebFont Loader to Make Browsers Behave the Same
- The Essential Guide to @font-face
- WebFont Loader - Google Font API - Google Code
Note: If you see a horizontal scroll-bar after implementing the WebFont Loader on body text, try adding overflow attributes: