Adding a Google Font to Customizr 46


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!


46 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

  • Reply
    Chelsea

    I am very new to this and the only change I wanted to make to the theme was to change the fonts. I created a child theme using Themify plugin. It only creates the styles.css file, which is pretty much blank. How do I access the functions.php file to make changes to the font in this instance?

    Any help would be greatly appreciated!

  • Reply
    elke

    Hi Nicolas,
    really having fun with your clean and flexible theme. One thing with the Google Fonts: I’d like to remove the googleapis URL in the HTML head completely, as my child theme handles the fonts locally. I see you seem to enqueue them in /inc/admin/class-admin-customize.php (?) but I cannot fiddle out a filter that removes them.

    Thanks for a tiny hint,
    e.

  • Reply
    fitandfreeme

    I haven’t edited a Word Press theme in almost two years… Where can I find the functions.php file and the style.css file?

  • Reply
    lifishake

    Hello, I’m a free customizr user from china mainland.
    I have a quite opposite question: how to DISABLE google fonts?
    As is known to all, google services have been blocked by our “Great Fire Wall”. Services like “fonts.google.com” always return timeout, which can only encumber the response time. And there are only few Chinese fonts on the services, either.
    So our Chinese dislike google fonts at all.
    Unfortunately, the newest version(3.2.10) add the google fonts option as a new feature. This causes when I change any options in “Global Settings”, I should update the “tc_theme_options”.”tc_fonts” on the DB manually.
    Is there any other way to stop google fonts?
    Sorry to comment here, because I don’t have the right to post in the forum.
    Thanks.

    • Reply
      Nicolas Post author

      Hi,

      Thanks for posting this issue, I did not know all those details about the Great Fire Wall.
      To disable the Google Font http requests : navigate to appearance > customize > global settings > Google fonts, and select a pair of web safe fonts from the font picker.

      Did this help ?

      Thanks :)

      • Reply
        lifishake

        Yes, it is really a way to stop connecting to google service. But also replaces defined font in style.css. You know, there aren’t any Chinese fonts in the pairs. So, how can I keep the fonts in style.css?

  • Reply
    Guy

    Hello,
    I’m using the latest customizr and get a 404 error on this line in my source code:

    How do I fix this please as I have selected Verdana as my font in customizr?
    Many thanks
    Guy

  • Reply
    Milos

    hey there! awesome theme and support for us noobs. I’d really like to make this theme work for my new website, however I need the latin-extended set. what’s the best way to implement it? As it is, characters like ć š đ and ž end up all crappy looking and my language’s full of them! Thanks!

Leave a Comment

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

Please check the following point before adding your comment

  1. - Did you check that you have the latest version the theme installed ?
  2. - Did you read the documentation ?
  3. - If you think it could be useful, please check your system informations : Navigate to Appearance > About Customizr and go to the bottom of the page.
  4. - Did you check if your issue was already resolved ? Before posting a new topic, you'll want to make a quick research with our Google powered search tool below.

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=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">