Optimizing Google Fonts in Themes  ## Metadata - Author: [[Kathrin]] - Full Title: Optimizing Google Fonts in Themes - Category: #articles - Summary: There are a number of methods to load Google fonts in a WordPress theme, but some are more efficient than others. Google has a post about optimizing the use of the Font API. I thought I’d summarize this as it applies to WordPress themes. - URL: https://wptheming.com/2014/05/optimizing-google-fonts-in-themes/ There are a number of methods to load Google fonts in a WordPress theme, but some are more efficient than others. Google has a post about [optimizing the use of the Font API](https://googlewebfonts.blogspot.com/2010/09/optimizing-use-of-google-font-api.html). I thought I’d summarize this as it applies to WordPress themes. ##### Enqueue or @import? One of the simplest ways to load Google fonts is to do a an @import from the stylesheet, but Google recommends to link directly from the head of the document instead. Properly enqueing the font and loading it from the head will also make it easier for people using child themes to change the font without copying the entire parent stylesheet over. Here’s an example of how to load the “Source Sans Pro” correctly so it is linked from the head. This code snippet would go in functions.php: | | | | --- | --- | | `4` | `wp_enqueue_style(` `'prefix_source_sans'``,` `'//fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,400italic'``,` `array``(), null,` `'screen'` `);` | If you wish to load a different font from a child theme, you would need to remove the font from the parent and then load their own using the above method. To remove the action from the child theme, this could be used: ##### Combining Fonts This is something I wasn’t aware of until [Emil Uzelac](https://twitter.com/EmilUzelac) pointed it out, but you can bundle multiple fonts in a single API call. This will save on HTTP requests and make the loading more efficient. Let’s say you wanted to load the fonts “Noto” and “Source Sans Pro”. Instead of loading it like this: | | | | --- | --- | | `4` | `wp_enqueue_style(` `'prefix_source_sans'``,` `'//fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,400italic'``,` `array``(), null,` `'screen'` `);` | | | | | --- | --- | | `7` | `wp_enqueue_style(` `'prefix_noto'``,` `'//fonts.googleapis.com/css?family=Noto+Serif:400,700,400italic'``,` `array``(), null,` `'screen'` `);` | You can do it with a single enqueue: | | | | --- | --- | | `4` | `wp_enqueue_style(` `'prefix_fonts'``,` `'//fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,400italic|Noto+Serif:400,700,400italic'``,` `array``(), null,` `'screen'` `);` | ##### Be Careful of SSL In both of the above examples you’ll notice I enqueue the font using “//fonts” rather than “http://”. This is so you theme will load correct even if the site uses SSL (https vs. http). ##### Use Only What you Need This is probably the most important suggestion. Many Google fonts have several different weights (400,600,700, etc) and styles (italic). If your theme isn’t using those specific weights or styles, make sure they’re not being loaded. And of course, don’t enqueue any fonts that aren’t in use., Optimizing Google Fonts in Themes, Kathrin, 01gnmd16tp2asbt3grwsv0x3yp.