How to add Google Fonts

To add a Google font to a TeleportHQ project, click the Project settings cog at the bottom of the left sidebar and open Fonts. Click Import from Google, search for the font, and click Import next to it. The font then shows up in the Font Family list everywhere in the editor.

Before you start#

• Changing project settings needs the Owner, Admin or Designer role. See What can each role do?.
• Google Fonts are free and available on every TeleportHQ plan.
• Twelve popular Google fonts are already in the Font Family list, including Roboto, Open Sans, Poppins and Nunito. You don't need to import those.

Steps#

1. In the editor, at the bottom of the left sidebar, click the Project settings cog.
2. In the Project settings panel, under Appearance, click Fonts. The Fonts drawer opens next to the panel.

3. Under Google Fonts, click Import from Google. A window with the Google Fonts list opens.

4. In the search box, type at least 3 letters of the font name. For example, Playfair.
5. Point at the font in the list. Preview and Import appear next to it.
6. Optional: click Preview to see every weight of the font, then click Back to list.
7. Click Import. The window closes.

You can sort the list with Sort by: Popularity, Name or Styles.

Check that it worked#

In the TeleportHQ Fonts drawer, the font appears under Google Fonts, written in its own font, with its number of styles and references, for example 6 styles · 0 references. Select some text on the canvas and open Text Style → Font Family. The font is in the list. See How to change the fonts on your site.

Troubleshooting#

The Import button is greyed out The tooltip reads "This font is already imported." The font is already in your project. Pick it from Font Family.

"No results found. Try again using a different keyword." Check the spelling, or search for part of the name, for example Playfair instead of Playfair Display SC.

I can't find a "More Google fonts" button in the font list TeleportHQ no longer has that button in the right panel. Import Google fonts from Project settings → Fonts, as described above.

"Cannot delete font with existing references" You can't remove a font while text or a text style in your project still uses it. Change those to another font first, then click the trash icon (Remove font) next to the font again.

Good to know#

• Each font in the Fonts drawer shows how many elements and text styles use it, for example 3 references.
• Remove font (the trash icon) removes an unused font at once, with no confirmation.
• Google fonts that your project no longer uses can be removed automatically when you change the color theme.
• Your published and exported site loads Google fonts from Google. Every Google font in the Fonts drawer is linked from the site, even if no text uses it, so remove the ones you don't need.
• The same Fonts settings are on the project's settings page, which opens from the project card's ⋯ menu on the dashboard (Project Settings → Fonts).