How To Add Google Fonts to Drupal 7

There are a variety of ways to add Google Fonts to your Drupal 7 site. You can use the @fontyourface module or adding custom code to the template.php file.  But here's a third method that I just figured out. It's lightweight, requires no coding, simple to configure, and well, it just works.

 

Step 1: Install and Enable the Add to Head module. This module adds any custom meta data to the <head> portion of your page or the entire site.

Step 2: Head over to Google Fonts and select the fonts you'd like to use in your project. Use the (+) to organize each desired font you want to use into a collection, copying either of the embed scripts as shown below (standard or @import) to your clipboard.  (We'll use the "Lora" font for this example).

Step 3: Go to the Add to Head configuration page in your Drupal install, create a profile, e.g. "google-fonts," and drop the copied snippet in. Select the 'Styles' section under Scope.

Step 4:  Update your theme's CSS file and assign the newly added font-family settings to your page elements

example...

h1,h2, h3 { font-family: Lora, sans-serif; }.  

Clear your cache, and you're good to go!

 

 

Add new comment