The best way to embed a font in your website – @font-face

We are all bored of using the same small set of web safe fonts in our websites. Do Arial, Verdana, and Times New Roman sound painfully familiar? Luckily there are quite a few different ways to embed fonts in a website including Cufon, sIFR, FLIR, PIR, Font Jazz and Dynamic Text Replacement. Most of these methods involve using JavaScript and Flash to display the custom font and some of these font embedding methods can be quite tricky to set up. There is one very simple way to embed a font in your site which doesn’t require any JavaScript or Flash. It’s called @font-face and it’s great!

Edit July 2011: An even easier way to embed a custom font in your website is with Google Web Fonts.

What is @font-face?

@font-face is basically a CSS rule that allows you to embed a font in your website so that viewers of your site will see that font even if it’s not installed on their computer. There is no JavaScript, Flash or images needed as this method basically uses a single font file that you upload onto your dedicated server.

Why use @font-face?

@font-face is a simple and elegant way to embed a font in your website and is in most cases superior to all other font embedding methods. It requires only the font you wish to use along with some CSS. Best of all @font-face is fully compatible with all major browsers. It’s search engine friendly and setting it up is quick and easy. No coding required. Sounds too good to be true doesn’t it?

How to use @font-face

You basically just need to buy/download the font you wish to use (you must have a license to use the font) and then add the following rule to your style sheet to reference your font. As an example let’s embed the Action Man font into our website.

@font-face {
 font-family: ActionMan;
 src: url(/font/ActionMan.ttf) format("truetype");
}

Now that your font is embedded in your website you can use it as you would any other font. Lets use our embedded font on our h1 tags like so.

h1 {font-family: ActionMan, Verdana, Helvetica, sans-serif;}

In order for your font to be cross browser compatible you will need a few different font file types for different browsers. Font Squirrel is a great resource that has made it very easy to use @font-face on your website by providing @font-face kits. These kits basically contain the original TrueType or OpenType fonts for Firefox, Opera, Safari and Chrome along with the EOT fonts for Internet Explorer. There are lots of great fonts to choose from, many of which are free for commercial use.

Issues with @font-face

Surprisingly, there are not really any issues with using @font-face to embed fonts in your website. But there are two things to be aware of. Firstly, your font will need to be downloaded by your website viewers which will usually cost you around 30KB of bandwidth for a typical font (which isn’t much at all). Secondly, as your font loads your website viewers may sometimes see the default font flash first for a second on the web page. Most people can live with that.

@font-face is quick to setup, simple to use, light weight, SEO friendly and browser compatible. The best method I have come across to embed a font in a website.

Adham Dannaway

Web Designer and Front End Developer with a passion for web design, coding, blogging, WordPress and chewing gum. Check out my web design portfolio and follow me on Twitter and Facebook!

Share this post!

Tags: , , , , , , , ,

  • Share
  • Stumbleupon Cre8ive Commando
    • Share

  1. Dzinepress on April 29, 2010

    Really useful cheat to embed a font into our modern websites.

  2. Joseph Conlon on July 1, 2010

    Good post, @font-face is excellent.

  3. senthil on August 4, 2010

    awesome dude..thank you sooo much

  4. Deb on September 3, 2010

    Great tool, but it doesn’t seem to cooperate with free Godaddy hosting (I have a client with this set-up, unfortunately).

  5. Sonia on September 24, 2010

    Thank you so much for this, you just saved me hours! I was just about to try and install sifr, this is way better.

  6. Ameet on October 20, 2010

    was looking for easier solution and now am happy that i got this one…keep the good work up

  7. Sachin on March 7, 2011

    this is good but on ie7 it’s not working

  8. Cre8ive Commando on March 7, 2011

    @Sachin – It should work fine in ie7. You need to make sure you have the right font files. Just visit Font Squirrel to get them. :-)

  9. Sonal on April 15, 2011

    In mozilla,embeded font is not visible without going through any of the page of my site.why is this happening,not getting.Because on another site the same code is working correctly.can anybody help me

  10. Natalie on April 15, 2011

    I LOVE this, but I can’t get it to work on Tumblr :(

  11. Rob Burton on May 23, 2011

    This has worked great, however I now have the @font-face code showing on the finished webpage, how do I mask this. Apologies if this is a basic question but this is my first website build so learning curve is really step at the minute.

Trackbacks

  1. [...] This post was mentioned on Twitter by Inv Amigo, lil nut. lil nut said: RT @cre8ivecommando The best way to embed a font in your website – @font-face http://bit.ly/cyFi3l [...]

  2. [...] Go here to read the rest: The best way to embed a font in your website – @font-face [...]

  3. [...] Edit 31.03.2010: The font embedding methods below are great but in most cases @font-face is superior. To find out more about it check out this post. [...]

  4. [...] The best way to embed a font in your website (probably) | Cre8ive … [...]

  5. [...] So that’s how you can create links with sIFR 3 that you can style with some simple CSS. There are lots of other ways to embed fonts in your website, one of the nicest ways is @font-face. [...]

  6. [...] you’re looking for another similar solution with more flexibility and variety you could try @font-face. Hey guys, my new blog will be up shortly. Stay [...]

  7. [...] CSS3 advancements and font embedding techniques such as @font-face it’s getting easier to manipulate the styles of web typography. We can now add many great [...]


Have your say!