All Collections
Tips, Tricks and "How to..." Articles
How to use custom fonts with Glow Loyalty
How to use custom fonts with Glow Loyalty

In the tutorial below, we'll show you how to adjust the fonts with a custom web font from Google.

Ryan P. avatar
Written by Ryan P.
Updated over a week ago

If you'd like to use a custom font(s) on Glow, you can go to Settings > Widget Design. Adjusting fonts is available on any of our paid plans.

There you can select custom fonts for the heading, body, and button. The fonts will change automatically in the preview as you adjust the settings.

Note: There is no save button, the changes are saved automatically.

You can also import custom web fonts by adding a few lines of CSS in your settings. Like the built-in font selector, custom CSS is available on all of our paid plans.

1. Locate a web font that is hosted somewhere on the web. In this example, we will use a Google web font from the Google font library (https://fonts.google.com).

For this example, the Google web font called "Indie Flower" can be found here. Click "SELECT THIS STYLE" to see the specific installation instructions for the font:

2. In the font, the selection sidebar view your selected families (fonts). You'll want the embed version and to use an @import rule.

3. Copy the @import CSS rule WITHOUT the style tags and paste the import CSS rule into Glow so it can be used wherever you need to override the default font.

4.  Once you have saved your CSS and imported the rule for your custom font you will be able to override any of the default text stylings in widgets.

For example, if you wanted to change all the paragraph text in Glow to use your custom font you would add a couple of lines of CSS like this below your import rule:

Related Articles:

Please let us know if you have any questions. 

Sincerely,
The Glow Team 

Did this answer your question?