How to add or change Google Fonts in Genesis theme

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.

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.