Using Google Fonts in the Editor with HTML

In this Quick Tip article we will show you how you can use Google Fonts, which are not directly available in the Editor, through custom HTML.


1. Navigate to Site Settings in the top right corner of the Editor

2. Click Website settings > Global HTML Tags in the left menu.

3. Paste the following code into the Head tag (Global HTML) field:

<link rel="stylesheet"
      body {
        font-family: 'Sono', serif;
        font-size: 48px;

body in this case means all body text on the website, meaning all text on the entire website. However you can write other definitions here, for example h1, h2, p, etc. You can also use for example row IDs to add the font to specific rows. 

font-family refers to the font you wish to implement.

font-size is the desired font size.

google fonts help centre.png

4. Click SAVE in the top right corner, go back to the Editor and click REFRESH. Now the font should be implemented throughout the site.


Was this article helpful?
0 out of 0 found this helpful