Using @font-face to add fonts to your Drupal theme

There are several ways to add cool fonts to your Drupal theme. Let’s take a look at manually adding the @font-face to your theme, applying the CSS and viewing the results. This method is supported in most modern browsers.

Let’s start off by finding a font we want to use. I’ve had a fair amount of success finding free fonts on Font Squirrel.

Found a font… Now what?

Now that you’ve found your font, let’s download the font or even better - the font face kit if it’s already available.

If the font that you have chosen has the option of downloading the font face kit, go ahead and click on the download link shown above. If the font does not, you’ll need to download the font and then head over to the @font-face generator on Font Squirrel.

Upload your chosen font and agree to the terms and hit the download button. Make sure that you are allowed to use the font you are uploading.

Unzip your Font

Extract the archive you just downloaded and take a peek at the css file. It should have a @font-face declaration similar to this:

@font-face {
    font-family: 'ActionManRegular';
    src: url('Action_Man-webfont.eot');
    src: url('Action_Man-webfont.eot?#iefix') format('embedded-opentype'),
         url('Action_Man-webfont.woff') format('woff'),
         url('Action_Man-webfont.ttf') format('truetype'),
         url('Action_Man-webfont.svg#ActionManRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

In the example above we are using the font ‘Action Man’.

This definition needs to be added to your theme’s stylesheet. Take note of the path to the font files. Each of the font files needs to be uploaded to your theme and the path needs to be updated relative to your stylesheet. My themes are usually organized with all css files in a css/ directory, so my fonts would be located in css/fonts/, which would mean that we need to update the font paths above to indicate the relative fonts/ directory.

Use your Font!

Now let’s apply our new font family to something. Let’s say that we want all of our H1 tags to use our new Action Man font. We would add a rule that looks like this:

h1 {
  font-family: "ActionManRegular", Arial, sans-serif;
}

You’re done

It’s as easy as that. If you would prefer not to add these fonts to your theme folder, you could check out the @font-your-face module. It allows you to browse and install fonts from your Drupal install.

#Drupal #Fonts