theme-sticky-logo-alt

How to add Google fonts into your WordPress

5 Comments

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:

coding-hands-houz-thumb

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=’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

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!

5 Comments

  • 3 June, 2013 at 16:40
    Stevko

    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?

    Reply
    • 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 :)

      Reply
  • 3 June, 2013 at 11:13

    Sí, muchas gracias. Lo voy a probar.

    :-)

    Reply
  • 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…

    ¡Gracias!

    Reply
    • 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!

      Reply

Leave a Reply

15 49.0138 8.38624 1 0 4000 1 https://tatica.org/en 300 0