Google provide free web based Fonts service called Google Fonts. Any web publisher can use these fonts on their website without any restriction. Since these are web based font, you don’t have to download or upload font files on your web server. With few lines of code, you can dynamically call specific Google Font files and use them on your Genesis website easily.

Add new Google Fonts in Genesis Theme

Note: Backup before making changes. One small mistake will bring the whole site down!
1. Go to Appearance > Editor.
2. Open Theme Functions (functions.php) file.
3. Add the following code to this file.

https://gist.github.com/333f5b66ee3fe1afb155

To change Google Font: If above (or similar) Google font code is already present, then there is no need to add the above code to functions.php file. Just change the name of the Google Font that you want to use in the existing code. Then you need to change the font name for the required CSS element in the style.css file.

4. Click Update File button to save changes.

Change Google Font Name in CSS file

5. Now open Style.css file. Change or add font name for the specific CSS element as seen in the screenshot.

Adding multiple Google Fonts in Genesis

To add another Google Font, you don’t have to repeat the whole code. Just append (or add) name of the new Google Font next to the existing Google Font separated by a vertical line. For example: the following code will add three Google Fonts: Lato, Open Sans, Oswald.

https://gist.github.com/53699ae8af798377a99f

In above code, (400,300,700) are different font weights or bold values for the specific Google Font. This property is supported by selected Google Fonts.

Note: You can also add Google Fonts using import function. However, above is a recommended method for adding Google Fonts to a Genesis theme.

4 Comments

  1. Jeff on May 25, 2015 at 1:17 pm

    HA – that was almost TOO easy! Thanks, Davinder – all of your tutorials are so very useful to a beginner like myself – Cheers!

    • Editor on May 25, 2015 at 5:54 pm

      Welcome Jeff. Glad you found this useful.

  2. Mark Bailey on March 10, 2016 at 6:18 pm

    Hi,

    I love Sunshine Pro and your tutorials!

    When using this method, does it matter how many Google fonts you add? I would like to offer users a selection of 30-60 of the most popular fonts. Are the fonts loaded if they are not used? Or are they all loaded no matter what (which would make a lot of fonts cause performance issues)?

    Thanks,

    Mark

    • Davinder Singh Kainth on April 29, 2016 at 1:11 pm

      This method will load all fonts explicitly defined in functions file. However, if you add fonts dynamically – like selecting specific font name out of multiple choices via “Customizer”, then things would be leaner ;)

Leave a Comment