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!
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!
Really useful cheat to embed a font into our modern websites.
Good post, @font-face is excellent.
awesome dude..thank you sooo much
Great tool, but it doesn’t seem to cooperate with free Godaddy hosting (I have a client with this set-up, unfortunately).
Thank you so much for this, you just saved me hours! I was just about to try and install sifr, this is way better.
was looking for easier solution and now am happy that i got this one…keep the good work up
this is good but on ie7 it’s not working
@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. 🙂
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
I LOVE this, but I can’t get it to work on Tumblr 🙁
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.