Combining Google Font Requests

[James Harper]

I’m working on speeding up my site. Is there a way to easily implement this suggestion from the Google Blog:

1. Combine multiple fonts into one request.

One pattern we see frequently is a separate <link> tag for each of the font requests. Many users don’t seem to know that you can easily combine multiple font requests into a single tag, just separating the fonts with a | character.

So, instead of:
<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Droid+Sans”&gt;
<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Lobster”&gt;

write:
<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Droid +Sans|Lobster”>

This simple trick will save one roundtrip to the server for each additional font requested, and also protect against blocking on older browsers which only have 2 connections open per domain at a time.

Thanks!
James

[James Harper]

By the way, I’m currently using Open Sans and Oswald.

[Bill Robbins]

Hey James,

Excellent question there. Each font being listed individually is a by-product of allowing users to choose their own fonts via the admin. Hard coded things typically are more efficient.

What you could do is this:

1. Make all of your font sections in the customizer/theme options.
2. View the front page of your site and then right click on the page and view the page’s source.
3. Find a section that looks similar to this:

   
   body {font-family:Open Sans, sans-serif; font-size:15px; }
   #text-logo p, #text-logo h1 {font-family:Open Sans, sans-serif; font-size:50px; }
   h1, h2, h3, h4, h5, h6 {font-family:Open Sans, sans-serif; font-size:Array; }
   nav#top-menu li, .slicknav_nav li, .slicknav_menu  .slicknav_menutxt {font-family:Open Sans, sans-serif; font-size:20px; }
   h2.hero-title {font-family:Open Sans, sans-serif; font-size:70px; }
   .hero-copy p {font-family:Open Sans, sans-serif; font-size:24px; }
   h3.widget-title, #sidebar .testimony-block h3.widget-title {font-family:Open Sans, sans-serif; font-size:24px; }
   

   and copy it. The above snippet is the font output from the demo for example.

4. Go to the Theme Options page and choose the advanced tab. Use the option there to disable Google Fonts and then add the code you copied earlier to the Custom CSS box on that tab.
5. Save your options.
6. Go to https://www.google.com/fonts and add the fonts you plan on using to a collection. Once you’ve added them, click the use button. On that screen in step three it’ll give you a link for your fonts that you’ll need to add to your theme.
7. Go to the Appearance section in your WordPress dashboard and choose Edit.
8. From the list of files on your right, choose header.php and find this line:

   
   <?php wp_head(); ?>
   

   and add your code from Google right above that.

9. Save your changes.

That should combine the fonts into one request instead of two. The drawback is if you need to change fonts or font sizes, you’ll have to turn back on Google fonts in the theme and repeat the process above.

If you run into any questions or trouble, let me know.

Thanks,
Bill

[James Harper]

Thanks Bill! I appreciate your very thorough and helpful answer.

[Bill Robbins]

Anytime James. Let me know if you have any other questions.

[Author]

Posts