Adding a Google Font to Customizr 30


Hi,

Today I am going to show you how to simply use a Google Font in Customizr without any plugin, and guess what : I takes 5 mins. This will be done in 3 simple steps :

 

1 Grab the Google Font

2 Edit your functions.php file

3 Edit the style.css

 

 

Where to copy/paste the code? The best way to customize a theme in WordPress is to create a child theme. Everything you need to know about child theme creation in Customizr here

 

1 – Grab the Google Font

Visit the Google Font library here and select the font you want. In this example I will choose the beautiful Raleway font.

Just type Raleway in the search filed and see it showing up. Then click on the quick use icon (see below) :

raleway-font-small

 

 

Once you are in the quick use screen, then scroll down until you see the “Add this code to your website” section and copy the line of code.

 

2 – Edit the functions.php file

Open your functions.php file (of your child theme) and add  the following code where you will paste the line of code you just grabbed from the Google Font website (change the font if needed of course) :

2-1 Method one (recommended)

This techniques uses the wp_enqueue_scripts action hook, which is the best and safest way to include stylesheets or javascripts in WordPress. As a good practice, I would rather recommend to include your Google font like this.

 

 

2-2 Alternative Method

 

3 – Edit the style.css file

Open the style.css file and add the font to the selector you want. In this example, I will set the Raleway font as the default body font.

Save and close. 

Done!


About Nicolas

My name is Nicolas Guillaume (nikeo). I am the developer of the WordPress Customizr Theme. This website is a discussion platform, your comments are welcome!


30 thoughts on “Adding a Google Font to Customizr

  • Reply
    eknem

    That don’t work for me:
    Parse error: syntax error, unexpected $end in /www/htdocs/xxxxxxx/wp-content/themes/customizrchild/functions.php on line 6

  • Reply
    Kristaps

    Hi,

    I have a problem with different language characters. I’m making my website in Latvian and letters like š, ā ļ and so on seem to work fine except for the footer and slideshow text. I tried to find the encoding line for those parts but didn’t. Could you help me with that please?

  • Reply
    SpudsMac

    I need to preface my request by stating that I am a true beginner…
    That being said, I have created a child theme via the ‘Child Themify’ plugin and when I access the child theme in the editor all that is available to me is the stylesheet css. Am I missing something obvious or is this possibly because I utilized the plugin rather than manually creating the child theme?
    Any help is greatly appreciated.

    • Reply
      Nicolas Post author

      Hi SpudsMac, you are not missing anything. The Child themify plugin only creates a style.css file for the child theme (which is enough to start with a child theme).
      If you want to add custom functions in a functions.php file you can either upload a new functions.php file by FTP or use this plugin : to easily manage your files right from admin : http://wordpress.org/plugins/wp-filemanager/

      Hope this will help and enoy the theme!

  • Reply
    Jon O

    Hi Nicolas,

    I have tried adding a google font to my site as suggested, but adding the open sans font instead of Raleway.

    adding the following CSS code:

    body {
    font-family: ‘open sans’, sans-serif;
    }

    seems to cause the menu to become extremely buggy, changing the body text also changes the menu font and this appears to make the menu become slightly unusable.

    Do you have any suggestions as to what could be causing this?

    Thank you for all your help and support with this theme.

    Jon

  • Reply
    hardy

    Hi,
    I think I have a very basic/foolish questions – I am trying to edit the functions.php file in my child theme to add google fonts.

    after editing the file, it looks like:

    I made the additions to the style.css file as well. But it does not have any impact on my site.

    Can you help?

    Thanks

  • Reply
    Liliya

    Hi Nicolas,

    I was following the instructions on this page – downloaded a Customizr child theme, went to the functions.php file and added the coding for my font. I updated the file and then it sent me to the following error:
    Parse error: syntax error, unexpected ‘*’ in /home/content/26/12116726/html/wp-content/themes/customizr-child/functions.php on line 2 . The problem is that now I cannot even access my website or WP to edit the file. Is there anything I can do? I am very desperate about this, please let me know if there is anything I can do.

    Many thanks in advance.

  • Reply
    Niculae Bucur Ion

    How do I add more fonts say 10, the first function recommended … you can give a small example to understand … thanks.

  • Reply
    Luca C

    Hi, 1 only (but important) question:
    I must duplicate my original function.php file in my ChildTheme and adding the code (where?!?) or make a new BLANK function.php with only the code ”

  • Reply
    ElectricFeet

    Hi Nicolas,
    Can this same method be used to point to a font that I place in the theme’s directory?
    ElectricFeet

  • Reply
    Mike iLL

    I’m having trouble wp_enqueue_scripts on jscripts. what would you recommend for that? code i’m trying is:
    add_action('wp_enqueue_scripts', 'enqueue_magnific_popup_scripts');
    function enqueue_magnific_popup_scripts() {
    wp_register_script( 'magnific_popup_script', get_stylesheet_directory_uri() . '/magnific-popup/jquery.magnific-popup.js', array( 'jquery' ) );
    wp_enqueue_script( 'magnific_popup_script' );
    }

      • Reply
        Mike iLL

        I think the problem may have been that they were being loaded at the top of the page. Here’s the code to get them to load below the footer:

        And thank you again for this awesome theme!

  • Reply
    FiWeBelize

    I added the needed entries but my font did not change. Please help. Let me know if you need anything from me.

    Here is what I added to the functions.php:

    And here is what is in the css :

  • Reply
    FiWeBelize

    Have tried clearing cache, different browser and different computer including my phone. Also, I just upgraded to the latest wordpress, not sure if that makes a difference, thought I’d mention it.

    If you browse to the site, can you see the font?

    http://fiwebelize.com

    Thanks

  • Reply
    M.Martin

    Hi Nicolas,

    Just wanted to thank you for this wonderful theme. I really, really like it! Thank you so much! Best wishes, M.Martin

Leave a Comment

Your email address will not be published. Required fields are marked *

Do you need to share some code? To display it in a nice looking syntax highlighter, wrap your code between the following tags (css code in this example) : <pre class="lang:css">YOUR CODE</pre> ( possible code language acronyms : css, php, xhtml, javascript, sql)

You may also use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">