Embedding fonts (Should know)

Typography can be a powerful design tool when used well. A lack of options in typography on the Web used to force designers to use images for titles (or implement complicated alternatives). The issue with this approach is that it requires time to download the image and it can impair usability. In modern web design this problem can be solved using web fonts or font services, and best of all they automatically adapt to high-definition displays.

To add CSS web fonts, @font-face is used. It has been around for a while now, but the drawback has always been a lack of browser support for various font formats. These options include .eot, .otf, .ttf, and .woff. Web Open Font Format (WOFF) is the latest standard that has been adopted by most font foundries and web browsers. WOFF will likely be the primary format in the future. This recipe will cover how to add a web font to your page that includes support for older browsers and then we'll discuss font services.

Getting ready

To get started we'll need a font to work with. You shouldn't just use any font you may have on your computer, as it may not be permitted for use on the Web. If you have specific fonts you'd like to use, it's best to check with the foundry and see if it's available as a web font. For this example we'll use http://www.fontsquirrel.com/ to select a free font kit with all the formats needed for full browser support.

Go to http://fontsquirrel.com/fontface to find a font kit that you'd like to use. These kits include all the formats that you'll need and a code sample of how to implement them. Alternatively, you could use their @font-face generator tool to create a kit from a font that you upload. For this example I've chosen to use the font Bevan within the slab serif section. Download the font kit and unzip the files.

How to do it...

1. To get started, move the .eot, .svg, .ttf, and .woff fonts that you downloaded, into your /retina/ folder. Then create a new HTML document called cssFonts.html inside the /retina/ folder. Within the basic HTML structure we'll add our CSS code to include our web font.

   <style>
   
     @font-face {
       font-family: 'BevanRegular';
       src: url('Bevan-webfont.eot');
       src: url('Bevan-webfont.eot?#iefix') format('embedded-opentype'),
              url('Bevan-webfont.woff') format('woff'),
              url('Bevan-webfont.ttf') format('truetype'),
              url('Bevan-webfont.svg#BevanRegular') format('svg');
   }

2. Then we'll add a class to display our new font as a large header.

   .largeHeader {
       font-size: 40px;
       font-family: 'BevanRegular', Arial, sans-serif;
       font-weight: normal;
     }

3. Next we'll add a final class for a small header.

   .smallHeader {
       font-size: 22px;
       font-family: 'BevanRegular', Arial, sans-serif;
       font-weight: normal;
     }
   
   </style>

4. Then we'll add the HTML code to display our new headers.

   <h1 class="largeHeader">Our New Large Header</h1>
   
   <h2 class="smallHeader">This header isn't as large</h2>

5. If you run this code inside of your browser you should see the new fonts. Notice that the text looks just as sharp on a Retina device.

How it works...

The @font-face tag allows us to define a font that we can use in our styles. The first property, font-family, creates a name to use for the font that we're going to define. Next we code the locations of the font files we're going to use. The initial src is for compatibility with old browsers. Then in the second src property we list out all the different formats for compatibility with as many browsers as possible. Browsers will take whichever font format they are able to display.

Next we create styles to apply to our header tags. To begin our font-family property we list our new font, BevanRegular, which we named in the @font-face statement. Make sure you wrap the name within quotes. Then you can list additional fonts as fallbacks in case the browser isn't able to understand the fonts we provided.

There's more...

Instead of having to find font packages online or deal with purchasing and converting fonts, you can use a font service. Font services host a variety of fonts on their servers and allow you to use them, for a fee or for free, by adding some JavaScript and CSS to your site. These services also take care of updating fonts, having versions available for different browsers, and licensing.

The disadvantage of using these services is that you're unable to host them on your own servers so there is a possibility of downtime. The advantages and convenience may outweigh this minor concern.

If you are interested in trying a font service, there are many to choose from. Some of the most popular services include https://typekit.com/, http://www.google.com/webfonts, and http://fontdeck.com/. These services all have different font options and different price models, so it's worth checking a few out to find the right fit for your site.