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.

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.

• Click “Save configuration” after the Import process has finished.

---

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.

• Make a search for two or three fonts with different filter settings and enable them.

Every enabled font will get a green background.

• Click Font display.
• Click the blue “Add Font display” button.

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

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

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.

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.

---

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.