Web Dev Blog

Looking for help with WordPress, Apache, Vim, Web Security and more. Here are a few tips.

Using CSS 3 @font-face for font rendering

There are multiple methods of creating custom fonts for web pages, Cúfon, sIFR, Google Web Fonts, etc… None of these have been a good fit for my projects until I looked into the CSS3 @font-face method. It’s simple to use and SEO friendly.

All you have to do is go to urbanfont.com, fontsquirrel.com or another good source of appropriate licensed fonts and pick out what you want.

Once you have the font files, use the @font-face generator at fontsquirrel.com to create a kit that includes all of the font files you need for browser support. Put the fonts and sample code in the appropriate places and update your CSS to use the new fonts. Walla, shiny new fonts on your web page.

Leave a Reply