All Collections
Design your site
Themes
Add custom fonts to your theme
Add custom fonts to your theme

How to use Google fonts or custom web fonts in your themes

Troy Villasanta avatar
Written by Troy Villasanta
Updated over a week ago

The second field in the theme editor is the Font Import Statement field. You can use Google fonts or custom web fonts in your theme here.

Google Fonts

To use Google fonts, first go to https://fonts.google.com. If you have used Google fonts before, you can add fonts to your collection and get the @import statement form the Cascading Style Sheets preview. If you have never used Google fonts before you will first need to find the fonts you want for your site.

To add a font to your collection, click the font that you want. You will now see a list of styles for that certain font. Select the styles that you want to add to your family by clicking the + Select this style at the right

Once you've selected all the font/styles that you want, click on the 3 boxes with plus sign icon at the upper right

This will open a pop-up at the right then click on the Embed tab, the pop-up will teach you how to use your new font collection.
โ€‹

If you click on the @import link you will see code explaining how to import the collection into your site. You should copy the code between the style tags. An example code would look like:

Get the url in between '' and it should start with https then you can now paste the URL into the field Font Imports.

Now whenever you want to use your Google font collection you can do so with the following values:

font-family: 'Roboto', sans-serif;

You should see this reflected in your theme now.

Custom Web Fonts

In order to use custom web fonts, you will first need to upload them somewhere. There are plenty of places to do this online including:

Did this answer your question?