Add more Google fonts to your Underground theme

As part of our new series of how to guides for our themes we are crossing off a list of some of the most commonly asked questions that come through to our support team.

Today we are going to talk about how to edit the code within your theme allowing you to add more fonts from Google to your Underground Shopify theme.

These tutorials are based on the assumption that you are using the following theme versions or newer:

Testament v5.1 ( March 2017 )
Mr Parker v5.1 ( March 2017 )
Icon v5.1 ( January 2017 )
Fashionopolism v4.3 ( March 2017 )
Vantage v5.1 ( March 2017 )

If you are using an earlier theme version then the process will be more complicated and will require more repetition of some of these processes. We can offer the installation of other Google fonts via our Shopify theme tweak service here for those that are not comfortable editing their code.

In order to edit the code and perform this change you should have a good understanding of editing HTML code, if you are not comfortable in editing code and do not know what you would do if things went wrong we recommend that you work with a designer in order to have this change made for you.

We regret that we can not offer direct support for edits gone wrong based on the usage of this tutorial.

1. Make a backup of your theme

In your Shopify admin open: Online store > themes
Next to your theme click on the Menu icon and choose: Duplicate

This will create a duplicate of your current theme as it is right now that you can revert to at any time should anything go wrong.

2. Choose your Google fonts

Go to: https://fonts.google.com/ to start viewing the fonts that are available for usage within any website. Use the options within the right side bar to filter through different font styles until you find some that you like.

For this demo we are going to add the "Karla" font to our store. 
Once chosen you should see this:

Click on Customize to choose different font weights that you might like to use within your store. In our demo we have chosen:

Regular: 400
Bold: 700

When ready click on the Embed link.

2 lines of code will be given to you by Goggle which we will need to use in the next step.

The link to the font

<link href="https://fonts.googleapis.com/css?family=Karla:400,700" rel="stylesheet">

The font CSS

'Karla', sans-serif;

Note that we will not be using the: font-family: part of that.

Keep this screen available and open your Shopify store admin in a new tab.

3. Edit your themes Google font snippet

In your Shopify admin open: Online storethemes
Click on the menu icon and choose: Edit HTML/CSS this will take you into the code editor.

On the next page you will see the themes folders and files, choose the Snippets folder and choose the file named: google-fonts.liquid

Here you will see the code currently used to capture the fonts from google based on the selections made within your theme options.

Scroll to the bottom of the page where you will need to paste in the following code:

{% assign font = "ADD THE FONT CSS HERE" %}
{% if settings.logo-font == font or settings.font == font or settings.headings_font == font or settings.navigation-font == font %}
PASTE THE LINK TO YOUR FONT HERE
{% endif %}

Replace the content in capitals from your Google font selections above so that you have some thing that looks like:

{% assign font = "'Karla', sans-serif;" %}
{% if settings.logo-font == font or settings.font == font or settings.headings_font == font or settings.navigation-font == font %}
<link href="https://fonts.googleapis.com/css?family=Karla:400,700" rel="stylesheet">
{% endif %}

Repeat this step for any additional fonts and click save when done.

4. Add the font to your themes config

To add the fonts to the selections that are already included within your theme whilst still in your themes code editor choose the Config folder and select settings_schema.json

Making a mistake in here can break your theme, be careful with any alterations. If you make a mistake use the undo function to roll back each step that you have made using CMD + Z on a Mac or CTRL + Z on a PC.

In your themes config there are 3 font selections that can be made. 

Body text
Headings
Navigation

You will need to add the font to each of these and so will perform the same edit 3 times by locating the appropriate code. To make things easier we can search within the editor.

On a Mac press: CMD + F
On a PC press CTRL + F
Search for:  Arvo,
Since this font is included in all of our theme and is at the top of the Google web fonts list we are going to add our fonts just above this to ensure that this remains simple. You should see:

{
     "value": "'Arvo', serif",
     "label": "Arvo",
     "group": "Google Web Fonts"
},

Directly above this you will add:

{
     "value": "ADD THE FONT CSS HERE",
     "label": "FONT NAME",
     "group": "My Google Web Fonts"
},

Replacing the uppercase & Bold text ... So that you have something that looks like:

{
     "value": "'Karla', serif",
     "label": "Karla",
     "group": "Google Web Fonts"
},
{
     "value": "'Arvo', serif",
     "label": "Arvo",
     "group": "Google Web Fonts"
},

Once you have this in place search again for Arvo
For each instance where you see the Arvo font being used and do not have your Google font code above it repeat the steps. You should have to do this process a total of 3 times.

Once you are confident that you have covered each font click save. Keep this window open and open your ThemesCustomize theme page in a new tab and test the fonts.

If something has gone wrong you can either return the the settings_schema.json file and undo all of your changes providing you have not closed the browser window.

If however you have carefully followed each instruction you should now see your new Google fonts are selectable within the theme editor. 

You can now select this, check within the theme demo to ensure that the theme is chosen and click save to make the change.

Let's talk about this

Leave a comment

comments have to be approved before showing up