Google has a wide list of fonts that allows us to give a better style to our websites, and even if the explanation they have on their website is quite clear it doesn’t work with our WordPress child themes. So this will be a short explanation about how to add Custom Google Fonts into your WordPress:
You can choose any of this three ways to make the font call from Google, this must go first on your head declaration
[wptabs style=”wpui-dark”]
[wptabtitle] as link [/wptabtitle]
[wptabcontent] <link href=’http://fonts.googleapis.com/css?family=Fjalla+One’ rel=’stylesheet’ type=’text/css’> [/wptabcontent]
[wptabtitle] as import [/wptabtitle]
[wptabcontent] @import url(http://fonts.googleapis.com/css?family=Fjalla+One); [/wptabcontent]
[wptabtitle] as javascript [/wptabtitle]
[wptabcontent]<script type=”text/javascript”>
WebFontConfig = {
google: { families: [ ‘Fjalla+One::latin’ ] }
};
(function() {
var wf = document.createElement(‘script’);
wf.src = (‘https:’ == document.location.protocol ? ‘https’ : ‘http’) +
‘://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js’;
wf.type = ‘text/javascript’;
wf.async = ‘true’;
var s = document.getElementsByTagName(‘script’)[0];
s.parentNode.insertBefore(wf, s);
})(); </script> [/wptabcontent]
[/wptabs]
Second Step: Including your font into the CSS
This is the step that won’t change, since it’s how you command the font to act over your CSS tag: (NOTE: The second font will work in case that the Google one doesn’t, it’s good to have a backup font just in case)
font-family: ‘Fjalla One’, Arial;
The WordPress Way
When you want to add Google Fonts into a child WordPress theme, you must add it as a function inside the head.php following the next syntax:
function load_fonts() {
wp_register_style(‘googleFonts’, ‘http://fonts.googleapis.com/css?family=Fjalla+One’);
wp_enqueue_style( ‘googleFonts’);
}
add_action(‘wp_print_styles’, ‘load_fonts’);
After adding this, simply include the font into your CSS
