Comment on Technical Support by SEO Dave.

WordPress Technical Support Adding the Google Font CSS to the WordPress header is easy.

To enqueue the Google fonts via your child theme edit:


Paste this to the very bottom:

add_action('wp_head', 'str_add_google_font', 1);
function str_add_google_font() {
echo '<link rel="stylesheet" type="text/css" href="|Oswald" media="screen">';

Modify Lora|Oswald to set the Google fonts you want available.

This will add The Google fonts Lora and Oswald. To add more it’s Lora|Oswald|fontname|fontname

The above enqueues the Google fonts, next you have to use them in the Stallion Responsive CSS files.

The wrong way to do this is manually edit the CSS files, the correct way to do this is via the Stallion Responsive colour scheme creator feature which is described at Stallion Theme Creator and the specific info for fonts Stallion Colour Scheme CSS Creator Fonts.

If you do it the right way it will make future updates far less painful. When I modify colour schemes in the future to add new features, you’ll be able to use your backup PHP file (described in the first link above) to rebuild your CSS file with a few clicks of the mouse. If you do it the wrong way by manually hacking the CSS files, when new features are added some might not look right with your hacked CSS file and you’ll either have to work out what needs adding or again hack the new CSS file (it’s a pain to do it this way).

By following the above you can create your own Stallion colour scheme (it makes CSS files) using the Google fonts you’ve enqueued.

Example by taking one of the Stallion example fonts from the second tutorial link above:

font: normal normal normal 100%/120% Arial, Helvetica, sans-serif;

To use a Google font you could use this:

font: normal normal normal 100%/120% Oswald, Arial, Helvetica, sans-serif;

This would result in a web browser first looking for the Oswald font (Google font), if it didn’t find it (not enqueued the font in the child theme as described earlier or Google removes the font in the future) would look for Ariel. If Ariel isn’t available move on to Helvitica….

We use font families (list of fonts) rather than one font because you can’t be 100% certain your font will be available to all web browsers. The above gives 4 fonts of which Arial, Helvetica and sans-serif are similar looking and tend to be available on most browsers.

The end result will be you’ll have a new Stallion Responsive colour scheme (will create a new CSS file) you could use on multiple sites. This is how I build new colour schemes, though not used Google fonts for it because there’s a performance hit enqueueing additional external CSS files: When you check the Google Pagespeed Insights tool results you’ll have a new render blocking issue you can’t fix: price you pay for using Google fonts.