Drupal Technical

How to use customized fonts in Drupal Themes?

Tintu.manuel | | 2 min read

Many Drupal users have wished to know how to use customized fonts in Drupal themes. If you are facing the same question when creating or modifying or editing a Drupal theme and want to know how to use customized fonts in a Drupal theme then continue reading.

We can use customized fonts in Drupal themes. For this example I have downloaded the 'Exo' font from http://www.fontsquirrel.com. Follow the steps below to add a custom font to a Drupal theme

Steps

  • Download the font from any website.
  • Open the downloaded folder and check the font files and stylesheet.
  • Open the CSS from the folder and check the different styles of fonts.
  • Copy the font folder in to the CSS folder in your theme's directory.
  • Open .info file of your Drupal theme and add the stylesheet link to it.
  • Replace the font-family to the current downloaded font in your stylesheet.
  • Clear the cache from the theme and you can see the font.

Applying the CSS Font-face

In the CSS file you can find the font-face settings as shown below. There might be different font styles like bold, thin & regular. Choose the desired font and add it in to your CSS for body or paragraph or any tag which is required.

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

The font style in our CSS file
body {
   font-family: 'ExoThin';
}

Thats all there is to it. If you have any clarifications regarding Druapl theming use the comment form below.

 

 

Related Topics