The days of being limited to just a handful of fonts on the web are rapidly coming a thing of the past. The problem is no longer a lack of viable solutions but rather an abundance of them. Technologies like Cufon, sIFR, FLIR and @font-face all represent different groups of developers placing bets on what they believe is to be the future of web typography.

The @font-face CSS method is among the strongest, simplest and the most flexible out of those competitors in the game. It’s to be the rock star out of the bunch as it gathering the most attention.

In this post today I will teach you how simple it is to implement @font-face with it cross-browser compatibility to your site and we will also look at a number of the supporting services that had arisen in making it even easier to use custom fonts in your web designs.

Benefits Of @font-face

  • Cufon/sIFR is still great but CSS support is incomplete as it’s relies on JavaScript to work and if the user have JavaScript turned off it is useless.
  • While @font-face relies on native browser rendering the same as web safe fonts
  • Simple to implement
  • Print stylesheets work with @font-face

Licensing Fonts

Font licensing presents one of the largest headaches and stumbling blocks for great typography on the web.  Naturally, some font foundries would like to be paid for their work and therefore place a strict restrictions on the use of their fonts. For now, we’ll just dodge the licensing problem completely by using a free font.

The web font licensing problem has caused a major rise in the popularity of sites offering quality free fonts. My favourite site that I like to use is Font Squirrel as they handle all the licensing problems meaning one less stressful thing I need to do.

Cross Browser Compatibility

It would be nice if using custom fonts online were very easy, but unfortunate it isn’t and of course we can’t possibly expect all the browsers to play nicely together, that would just be unreasonable.  Instead, all the major browsers have decided to go their own way with font formats that they choose to support.

The guide below is to show what browser support which format

  • Internet Explorer – only supports EOT
  • Mozilla browsers – supports TTF
  • Safari and Opera – supports OTF, TTF and SVG
  • Chrome- supports  TTF and SVG.
  • iPhone & iPad – supports SVG

The Simple Syntax For Using @font-face

@font-face only requires a few lines of CSS and is therefore very easy to use without any use of third-party tools. Today we will use the site Font Squirrel to download our font and the font we will use is in this guide is League Gothic (but download any font you like to use)

Once you’ve downloaded the font, place the font file in the root directory of your web page. Note: your directory could be different.

In my directory I’ve sorted it like this

Now, go into your stylesheet and insert the following code:

@font-face {
font-family: 'League';
src: url('../fonts/League_Gothic.ttf');
}

This snippet above shows us that the custom font an identifier for the rest of your CSS and then points to the font file to use when this identifier is mentioned. The first line in my code sets an identifier of “League” to the font.

It’s best to keep things simple by always using the font name, but you can ultimately use any name you want like “TheUltimateFont” would work just as well as long as you refer to the font elsewhere using the same name.

The second line tells the browser that when “League” is called, it should load the font League_Gothic.ttf file from the url mentioned. This url is simply wherever you choose to place your fonts file.

So when ever you want to use that font anywhere in your site, simply build a font stack like you would normally, using your custom font identifier at the beginning.

font-family: League, Verdana, Arial, Helvetica, sans-serif;

Tip: It’s important to set up these fall backs in case the custom font doesn’t work for some reason.

Depending on your browser, this should give you a page with a working custom font face.  The text should load immediately and is fully selectable. This should work with the copy+paste computing functions (a limitation of other font replacement techniques).

Author Notes: This guide presented is for Mozilla Firefox that means I have wipe out all other font format for other browsers.

Resources, Sites & More Info.

Paul Irish’s Bulletproof @font-face syntax

This is the method for everyone who wants to include multiple versions of the font/s you downloaded so it will work on all browsers.

Font Squirrel

A site that takes all the hard work away scouring the internet in search of free, highest-quality, designer-friendly, commercial use fonts they also have an @font-face generator.

Type Kit

An @font-face services website they takes all the hard work out to make @font-face easier to implement. There is a free trial plan that allows you to use a limited number of fonts on a single website. Plans start out from $24.99

Font Deck

Another awesome site for those who want an easy way to implement @font-face on to your website. Plans start out from $2.99/year

Fonts Live

Another great service provider that takes care of the complicated licensing hassles while bringing you hundreds of high-quality fonts from the best designers and foundries. You can purchase each font individually and pay a yearly subscription fee for the use of the font.

Google Font API

The Google Font API helps you add web fonts to any web page also check out the google font directory they are consistently adding new fonts.

Final Words On @Font-Face

Using @font-face isn’t really new as this technology have been around since the days of CSS2 but as of lately it becoming a popular choice for web developers and designers to use.. So before start thinking of  using that web safe font how about choosing a custom font to complement your website even more.

Share

A Guide On How To Use @font-face