custom web font in Drupal website

Enabling custom web font in Drupal website

This blog will walk you through one the contributed module in Drupal community that has been a heave of sigh for me whenever I was in trouble for web building activity. A couple of weeks back, I have been assigned a task where the requirement was to enable ‘Benton-sans Regular’ font throughout the site. Initially, I thought it would be an easy task and can be done easily. But I was wrong.

No issues! If you facing similar difficulties. Here, I am going to discuss how you can enable ‘Benton-sans Regular’ font seamlessly using Drupal font-your-face module.

Firebug Developer console


Earlier, I thought of writing a custom CSS for all the basic usable tags like







by adding a font attribute ‘Font-family’. However, I was not cognizant of the font availability that it is equally important to render content with new fonts. At that point of time, the only values that were present on Firebug to debug was  -webkit-body, -webkit-pictograph, cursive, fantasy, inherit, initial, monospace, sans-serif, serif and Unset.


Solution: Here I am going to share the same solution that I applied to the above-mentioned issue. After doing little research I came across a font-your-face module that turned out to be a life savior for me. Note that there are many other lightweight modules available in community, such as  

  • , and

    Icon fonts (
    Google fonts (
    sweaver (

    The reason behind choosing font-your-face module is that it offers admin interface to manage and apply new fonts. With this module, admin can also add module through CSS selector and enable font for the sub-theme.

    Prerequisites: Font file is required to enable Font. Here format should be EOT(embedded opentype) or TTF (truetype fonts) or WOFF (Web open font format), SVG (Scalable vector Graphics font format). Below is the list of the browser that supports Font format type.

    Font compatble browser list


    Let’s start by enabling the contributed module.

    Module enabling


    Here Providers display enabled font count, Advanced provides a checkbox (see below) and Preview holds sample text to be displayed while previewing enabled font.


    Select the ‘Load fonts in all themes, including themes’ checkbox

    font-your-face configuration page

    Note: While adding a new font to the site, admin can provide basic information like font name, style of the font (Normal, Italic, Oblique), CSS font weight (Normal, bold, Bolder, lighter, 100, 200, 300, …..900).

    Import local font


    Browse local font


    By Font: This tab allows you to add CSS selector class. Select the checkbox and save the setting.

    Editing enabled font

    Once you save the setting, Font tab will start listing up Enabled Fonts.

    individual tag setting for font

    By CSS Selector: This tab lists HTML tag where admin can individually assign a font to each tag. Now click on save applied fonts.

    HTML tag selecting font setting page


    After assigning a new font to the desired tags, you can see the font reflection while loading the page.

    Note: Don’t forget to clear the cache.

    That's it! The above steps are walk-through for ‘@fontyourface’contributed module that supports multiple service provider like, google font,, font Squirrel and Fontdeck. There are many other lightweight modules available in that you can choose as per your requirement.

    We, at Valuebound, recommend trying out multiple font styles to find out what works well for your current project or requirements. Also, we invite you to comment below or ask any questions you may have.

      • Go for the normal installation as we do for all contributed module.
      • Click on Configure button, it will redirect you to
      • Now under General quick tab, you can see three different options: Providers, Advanced and Preview
      1. Load fonts in all themes, including admin themes.
      2. Keep detailed watchdog logs
      • Import Local Font quick tab having Font information fieldset with multiple font type upload option.
      • Now upload your choice of Font file like EOT/TTF/ WOFF/ SVG and click on confirm button.
      • Now under @font-your-face, enable fonts tab that has three sub-tabs, namely:
      1. By Font
      2. By CSS Selector
      3. In Themes