Home > Tutorials and Resources > How to Embed Web Fonts

How to Embed Web Fonts

By B Lingafelter          CSS, typography

Embedding web fonts with the @font-face rule allows you to link to real fonts on your server, or the server of a font-embedding service rather than resorting to font-replacement technqiues like using images, Flash, and scrpting to create text. This method is not only easier and less work intensive, but also does not negatively impact accessibility or usability.

Acceptable Fonts and Resources

There are two issues you need to consider when choosing web fonts.

  1. Choose fonts that look good displayed on the web. Many fonts created for print purposes are not legible on the web.
  2. Choose fonts with licenses that explicitly allow web embedding or redistribution. Be sure to read the end-user license aggreement (EULA); most fonts, including free ones, do not allow web embedding or redistribution.

Use the following resources to find acceptable fonts:

  • Awesome Fontstacks - Download font bundles and ready-to-go CSS code!
  • Font Squirrel @Font-Face Font Kits - Kits include TTF, EOT, WOFF, and SVG formats along with sample .html and .css files
  • Google Font Directory is a library of free fonts. You can either link to a font using the Google Fonts API or download the font and host it yourself.
  • The League of Moveable Type is a small collection of free, open-source fonts licensed for font embedding.
  • Kernest - Collection of fonts specifically for embedding. Not all fonts are free.
  • Fonthead - All fonts can be embedded but most are not free.

File Types and Browser Support

Unfortunately, not all browsers support the same font file types. For your unique font to show up in every browser that supports @font-face, your font will need to be available in these formats:

  • TrueType (TTF) and OpenType (OTF) work in most browsers
  • Embedded OpenType (EOT) works in IE4 through 8
  • Scalable Vector Graphics (SVG) works in Mobile Safari (browser on iPhone, iPod Touch, and iPad) and on Chrome, desktop Safari, and Opera
  • Web Open Font Format (WOFF) currently works in Firefox, Chrome, and IE9 but the other major browsers will be adding support soon as WOFF is becoming the standard web font format

Example 1: Downloaded Font Squirrel kit

On this page, I used the DroidSansBold font that I downloaded as a kit (Droid-Sans-Bold-fontfacekit.zip) from Font Squirrel. Use CSS > View CSS from Web Developer toolbar in Firefox to examine my stylesheet.

  1. Go to Font Squirrel and choose an appropriate font.
  2. Click Get Kit link and save the .zip to a "Web Fonts" folder on your hard drive. (This makes it easy to find and reuse the font on any site.)
  3. Unzip the kit file. (Folder will be named with font name, Droid-Sans-Bold-fontfacekit in my case.)
  4. Copy and paste the unzipped folder into your website and rename it. (I put mine inside my css folder and renamed it fonts for simplicity.)
  5. Open the example stylesheet.css (font folder) and copy the @font-face rule(s).
    NOTE: Font Squirrel kits currently use the New Bulletproof @Font-Face Syntax
  6. Paste the @font-face rule(s) into your site's .css file, but be sure to place it at the very top.
  7. Adjust the path to the fonts as needed.
    NOTE: The relative path should point to location of the font files from the .css file.
  8. Now just add the font to the beginning of the font stack in the appropriate rule(s). Be sure to wrap font name in single quotes as shown below.
  9. When you publish the site to your remote server, be sure to upload the fonts folder along with the .css file.
@font-face {
  font-family: 'DroidSansBold';
  src: url('fonts/DroidSans-Bold-webfont.eot');
  src: url('fonts/DroidSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
  url('fonts/DroidSans-Bold-webfont.woff') format('woff'),
  url('fonts/DroidSans-Bold-webfont.ttf') format('truetype'),
  url('fonts/DroidSans-Bold-webfont.svg#DroidSansBold') format('svg');
  font-weight: normal;
  font-style: normal;
}
Example @font-face rule (top of .css file)
article > h3, article > h4 {
  font-family: 'DroidSansBold', Helevetica, Arial, sans-serif;
  font-weight:normal;
}
Example font declaration

Example 2: Linking to Google Fonts API

Google fonts can be downloaded and hosted on your server, like the font kits from Font Squirrel. However, you can also choose to just link to a font on Google's fast server and let it serve the correct file type for the browser used. On this page for example, I linked to Google's Tangerine font and then just declared it in my header > h2 selector.

  1. Go to Google Font Directory and choose an appropriate font.
  2. Click Quick-use link.
  3. If available, select additional font styles needed (step 1)
  4. Scroll down to step 3, Add this code to your website.
  5. Copy the link tag and paste into the <head> section of your page. Be sure to place it above the link to your site's stylesheet. Refer to Google's Getting Started Guide for examples.
  6. Now just add the font to the beginning of the font stack in the appropriate rule(s). Be sure to wrap font name in single quotes as shown below.
<link href="http://fonts.googleapis.com/css?family=Tangerine:400,700" 
rel="stylesheet">
Example link to Google's font API
header > h2 {
  font-family: 'Tangerine', serif;
  font-weight:700;
}
Example font declaration