| Drupal

How to Use Google Webfonts in Your Drupal 8 Site

Although Drupal has reputation for being a developers' platform, lots of user rely on Drupal's admin area for key tasks.

For typography in Drupal sites, the best way to change your site's fonts via the admin is a module called @font-your-face

The @font-your-face module allows you to work with webfonts like Google Fonts or Font Squirrel. It also provides the ability to work with paid font services like Typekit or fonts.com.

In this tutorial, you’ll learn how to configure and use this module in Drupal 8.


Step #1. Enable the required module

  • Download and install the @font-your-face module from Drupal.org.
  • Enable the @font-your-face module.
  • Enable the integrations you need. In this example, I'll enable the Google Fonts submodule.

font your face module

You have to check the @font-your-face settings in order to import the fonts of each one of the enabled submodules.

  • Click Appearance > @font-your-face > Settings
  • Click the "Import all fonts" button. The process will take about 5-10 minutes to complete, depending on the speed of your internet connection.

Drupal webfonts import

  • Click "Save configuration" after the Import process has finished.

Drupal webfonts save configurations


Step #2. Create a Font Display

In order to create a font display, you have to browse and enable your desired fonts.

  • Click Appearance > @font-your-face > Browse (This is a View, you can edit it if you want).
  • Select and enable the fonts you want to use in your site.
  • On top of the page is an exposed filter. You can search the fonts by name or specifying other criteria like the weight of the font or its classification.

Drupal webfonts font selector

  • Make a search for two or three fonts with different filter settings and enable them. Every enabled font will get a green background.

Drupal webfonts disable fonts

  • Click Font display and then click the blue "Add Font display" button.

Drupal webfonts add font display

  • Add a proper label to the Font display.
  • Choose the font.
  • Choose a preset selector, for example All Headers (h1, h2, h3, h4, h5, h6).
  • Choose the theme you want to add this particular font display.
  • Click "Save".

Drupal webfonts webfont display settings

  • Repeat the process with other fonts and Preset selectors.
  • If you want to choose another selector not included in the Select list options, choose other and type the selector in the text box.

Drupal webfonts selectors font display

  • Please take notice that the cascading nature of CSS will apply depending on the order you create the Font displays. The last one will take precedence over the others.

several font displays

  • After creating all necessary Font displays, you can either create some content or take a look at your already existing content.
  • The default Bartik fonts have changed and now match the ones you enabled and configured.

webfonts before after


Conclusion

The @font-your-face module for Drupal 8 provides an easy way to change the fonts of your site without writing additional CSS code.

This module is very useful in sites that switch their theme according to some predefined event. You can configure different Font displays for the same Preset Selectors depending in the theme currently in use.

Thanks for reading! If you're looking for a more code-centric approach, try this video from our Drupal 8 Theming class.


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.