Working With CSS3′s @font-face

Written by Fikri Rasyid

CSS3 Logo

Lately i’ve been working on WPNest newest theme which is used custom fonts. I used to use cufon to handle this. However, It has some limitations and the buzz & advantages of CSS3 & @font-face are just too cool to be ignored. Long story short, i’m using CSS3′s @font-face in the development of this latest theme of WPNest. I learned some things during the development, though:

  1. @font-face can be cross-browser compatible (even to IE6) if you write it right. It was awesome. For more information you should read Paul Irish’ blogpost about it here.According to Irish’s post, this is how @font-face syntax should be written to achieve its best result on variety of browsers:
    @font-face {
        font-family:'Graublau Web';
        src:url('GraublauWeb.eot?') format('eot'),url('GraublauWeb.woff') format('woff'),url('GraublauWeb.ttf') format('truetype');
  2. To apply Paul Irish’s bulletproof @font-face syntax, you need at least three types of font: .ttf, .woff and .eot. If you only have one type of font you’d like to use, that’s not the end of the world. Use fontsquirrel’s @font-face generator instead.
  3. Google webfonts rocks. You may safe amount of bandwith by using this service. BTW, it has a very cool font previewer.

Any more thought on using @font-face? Feel free to share :)

About The Author

Fikri Rasyid - I speak HTML + CSS + jQuery, breath in world wide WordPress-land, co-founded WPNest and currently pursuing my bachelor degree majoring English Education at Indonesia University of Education. Google my name for more information about me.

Connect & Subscribe

Keep in touch and get my latest content trough:


Post Info

6 Responses for This Thought

  1. Taufik

    27 February 2013

    Fonts that’s not uploaded on local directories won’t work in Firefox for security reasons. But this problem can be solved by converting the font file into base64. Here’s an example ⇒ hxxp://


Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>