Using Awesome Fonts on your Drupal Website

  • Kevin Wall's picture
    October 31, 2013

Tired of seeing Arial fonts across your Drupal website? It sure can get boring reading the same web fonts.  Designers often like to utilize custom fonts to tell the story or message. There are many online tools that provide custom fonts like: 

There are many types of services, but most of these are either monthly subscriptions or free services such as Google Fonts. The embedding typically makes it difficult to place on more than the accounts approved domains. Some of the embedding scripts will do some odd embedding styles for Windows IE 8/7/6, where it will cut off some of the font or have odd style layouts on fonts.  For these, you should plan on excluding the embedding. Many of these allow you to embed them via a JS include file that the service will allow you to place it on the template file. Drupal has a simple option of adding these files through Drupal @fontyourface module. This module provides an admin interface for installing most of these features or third parties. All you need to do is add your font ID or selections and they're available to use on your website / CSS. 

Some of the issues that can occur with these font services: 

  1. The font service goes down, breaking your awesome fonts on your website (some of these allow local storage of the font which you should take into account).
  2. The font 1/2 loads through javascript and looks 1/2 loaded throughout the website.
  3. Your JS has an error in it and it stops the font from loading. 

Other types of custom font embedding you can use are: 

  1. SIFR - flash based embedding of fonts. (SIFR)
  2. Cufon -

The simplest method of adding a font to your site with newer CSS techniques is to use @font-face, for example where you store the font in your template and reference it: 

font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9 */