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.
      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

Jaywant Topno

Jaywant is associated with Valuebound from past few years. Joined as a Trainee to get engaged with development ops and Drupal Community. Currently he is helping a Content delivery Team to produce a valuable information and newbies to understand Drupal. If you really want to hang around join him on CALL of DUTY, i believe you'll get a perfect head shot.
More about Jaywant Topno

comments powered by Disqus