Shopify - Add a custom Google font without editing the theme code

Most of the guides online showing you how to add a custom font, say a Google font, by editing the theme liquid files. This can be a bad idea because come upgrade time you may find yourself trying to remember all the little changes you made to the theme files over time that are no longer compatible with the upgraded theme.

Here is how you can add a custom font without editing the theme code directly, rather using the "custom liquid" block within your sites page:

Steps

1. Edit the theme you want to modify

2. Add a custom liquid block

3. Insert the following code in to that custom liquid block, making the changes required for your desired font:

<script>
    var link = document.createElement('link');
    link.setAttribute('rel', 'stylesheet');
    link.setAttribute('type', 'text/css');
    link.setAttribute('href', 'https://fonts.googleapis.com/css?family=Sofia');
    document.head.appendChild(link);
</script>

4. Optionally override a single block element CSS to modify the text you want to change

Note: You may need to work out what html/css element is being used to display the text element you want to change, which in this case is a <h2> element:

5. Modify the element CSS overriding the html element we found above:

eg: 

h2 {

    font-family: "Sofia", sans-serif;

    font-size: 1.2em;

}

Final output can be seen below, the "Browse our latest products" now has a new custom font: