@font-face

Recently, especially starting in 2010, the combination of browsers support for @font-face and web designers’ understanding of how to use it have both progressed to the point where it has become a good viable solution to the web font problem.

If you don’t know what the web font problem is, in a nutshell all computers have different sets of fonts installed. As a web designer you don’t know what any user might have on a computer. If you want to use a fancy font that it is unlikely many will have on their computer your previous options were:

  • Just suck it up and use it anyway in your font stack and make sure you also include some alternatives, knowing most will not see the site as you intended.
  • Use an Image Replacement technique where you make an image of the text in the font you want in an image editor (aka Photoshop) and that image is shown in place of the text.
  • Use some other method such as sIFR which replaces text with a Flash file with the text in the font you want or such as one of a few javascript methods.

@font-face is different than those solutions because it this solution actually provides the font file for users to download and then the browser uses the actual font to show the text on the page. It has its own limitations, the user has to download a file before the text is shown so sometimes there is a flash of text with a different font before the font file loads, but in general its a compelling solution and one you have to be able to use.

The rest of this page helps you use it.

Using @font-face

There are two basic ways:

  1. Upload the font to your site and point to it so people can download it from there
  2. Use font linking service, like Google Font API or Typekit, who host the font and give you some code to put in your page

1. Upload the font

@font-face {
font-family: ‘YanoneKaffeesatzLight’;
src: url(‘yanonekaffeesatz-light-webfont.eot’);
src: local(‘☺’), url(‘yanonekaffeesatz-light-webfont.woff’) format(‘woff’), url(‘yanonekaffeesatz-light-webfont.ttf’) format(‘truetype’), url(‘yanonekaffeesatz-light-webfont.svg#webfontPgbfvP4m’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

then you just use the font as described in font-family above in other places in your css
h1 { font-family: ‘YanoneKaffeesatzLight’, arial, serif; }

In the example above you would have to have all of the files installed:
yanonekaffeesatz-light-webfont.eot
yanonekaffeesatz-light-webfont.woff
yanonekaffeesatz-light-webfont.ttf
yanonekaffeesatz-light-webfont.svg#webfontPgbfvP4m
The Font Squirrel Generator handles creating these files for you if, for example, you only have the ttf font file.You can also download fonts with a license from somewhere like Google Font API that allows downloading, and then run it through Font Squirrel Generator and use it in your site.

2. Use Font linking Service

This example shows the Google Font API in action. There are others like Typekit and Kernest First you would go to the Google API page

  1. Find the font you want on Google: http://code.google.com/webfonts/
  2. Go to the page and click the Get the Code link. It will give you something like this to paste inside the <head> element of your page.
    <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz&subset=latin' rel='stylesheet' type='text/css'>
  3. Then you can just use the font in your CSS. Like this
    h1 { font-family: 'Yanone Kaffeesatz', arial, serif; }

Yes, it’s that simple. The only problem is there aren’t that many font’s to choose from in the Google API.

Read Up

To get the full monty on embedding fonts these two articles both do a good job of talking about the different options. There are a number of different factors to take into consideration. This kind of reading is something you will have to continually do to stay in the game as a web designer:

http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/
http://sixrevisions.com/css/font-face-guide/

Paul Irish Bulletproof method to using @font-face, Font Squirrel and other generators use this as a guide:

http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

Finding Fonts

You can’t just embed any font you want with @font-face. The person who created it has to have licensed it for that purpose. Thankfully there are a number of places you can get free or low cost fonts to use. Here is a list of (some of) them:

Places to Get Fonts (some free too!)

Font Squirrel: http://www.fontsquirrel.com/
- free fonts, they also have the font css generator to help with the process (you can upload your own fonts with that tool too).

Google Font API:
http://code.google.com/apis/webfonts/
http://code.google.com/webfonts/
Guide to using Google Font API: http://sixrevisions.com/web_design/google-font-api-guide/
- free, takes care of font embedding for you with simple code

The League of Moveable Type: http://www.theleagueofmoveabletype.com/
- a few free fonts (12 and growing) but good quality

Fontex: http://www.fontex.org/
- free fonts, lots

Larabie Fonts: http://www.typodermic.com/larabie-fonts.html
- http://new.myfonts.com/foundry/Larabie/
above is the url to download, some are not free so pay attention. You have to add to cart even though free.

Dieter Steffmann Fonts: http://moorstation.org/typoasis/designers/steffmann/index.htm
- a number of fonts you can download for free, have to click to preview so it is hard to browse

TypeKit: http://typekit.com/
- This is a service that gives you code to use on your page. There is a limited number of free fonts but they have a good selection of fonts and have reached agreements to get fonts you can’t legally use otherwise.

Kernest: http://kernest.com/
- mix of free an premium, simple code like Google Font API and typekit

Typotheque: http://www.typotheque.com/webfonts
- one time payment per font

Fonts Live: http://www.fontslive.com/
- pay and yearly fee per font

Ultimate Font Download: http://www.ultimatefontdownload.com/index.htm?hop=typodermic
- 10,000 fonts for $20

List of fonts from a number of places. A lot of the same links as above, some different.
http://webfonts.info/wiki/index.php?title=Fonts_available_for_@font-face_embedding

One Trackback

Post a Comment

Your email is never published nor shared. 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>