How to add Google fonts into your WordPress


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:


The General Way

After selecting the font you want, follow this two steps:

First Step: Calling the font

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=’’ rel=’stylesheet’ type=’text/css’>  [/wptabcontent]
[wptabtitle] as import [/wptabtitle]
[wptabcontent] @import url(; [/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’) +
wf.type = ‘text/javascript’;
wf.async = ‘true’;
var s = document.getElementsByTagName(‘script’)[0];
s.parentNode.insertBefore(wf, s);
})(); </script> [/wptabcontent]

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’, ‘’);
wp_enqueue_style( ‘googleFonts’);
add_action(‘wp_print_styles’, ‘load_fonts’);

After adding this, simply include the font into your CSS

font-family: ‘Fjalla One’, Arial;

Help tatica and donate with paypal!

Previous Post
Khaleesi!! Mother of Tux
Next Post
SFD 2013 registration is now ON!


  • 3 June, 2013 at 16:40

    Some (many?) wordpress themes already have google fonts. And it happens, that page is loading and until fonts are loaded, all texts are invisible. Will there be a tutorial how to remove google fonts from wordpress?

    • 3 June, 2013 at 16:48

      LOL! Indeed… to be honest, I don’t like to use custom fonts for my personal websites, but when you’re working with a client that tells you that he “specifically” wants that font, then you have to obey and do the best. Now, to remove a font is just the opposite, take out the function (or the declaration, so there is no server load) and then just change the CSS and use a different font there the call was made. Is easier :)

  • 3 June, 2013 at 11:13

    Sí, muchas gracias. Lo voy a probar.


  • 3 June, 2013 at 11:01

    Hola! Una pregunta… ¿Se pueden agregar Google Fonts a la lista de fuentes para escribir texto? ¿O sólo se pueden agregar a los temas?

    No sé si se entiende mi pregunta…


    • 3 June, 2013 at 11:07

      “Creo, asumo y espero” que sí. Solo tendrías que ir al CSS del admin y editar la etiqueta. Creo que la etiqueta sería #wpbody-content, pero es cuestión de revisar. Una vez que has cargado la tipografía (o varias) solo con editar el CSS respectivo puedes cambiar la tipografía de todo; inclusive, tener una tipografía para titulos, otra para contenido e inclusive, otra para el admin.

      Espero la respuesta te ayude!


Leave a Reply

15 49.0138 8.38624 1 0 4000 1 300 0