How to upload your own fonts

To add your own font to a TeleportHQ project, click the Project settings cog at the bottom of the left sidebar and open Fonts. Under Custom fonts, click Upload font file and pick the font file from your computer. TeleportHQ fills in the name, weight and style from the file. Click Add font, and the font appears in every Font Family list in the editor.

Before you start#

• You need a font file in one of these formats: .ttf, .otf, .woff or .woff2.
• Make sure your font license allows you to use the font on a website.
• Changing project settings needs the Owner, Admin or Designer role. See What can each role do?.
• The file must fit your plan's size limit per file. See Which files can I upload, and how big can they be?

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 Custom fonts, click Upload font file.

4. Pick your font file. For example, BakeryScript-Regular.woff2. A New font card opens.
5. Check the Name. TeleportHQ fills it with the name stored in the file, for example BakeryScript-Regular. This is the name you'll see in the Font Family list. Change it if you like, for example to BakeryScript.
6. Check Weight (for example, 400) and Style (Regular or Italic).
7. Click Add font. A spinner shows while the file uploads.

Check that it worked#

In the TeleportHQ Fonts drawer, the font appears under Custom fonts, written in its own font, with its weight, style and number of references, for example Weight 400 · 0 references. In the editor, select some text and open Text Style → Font Family. Your font is in the list. See How to change the fonts on your site.

Troubleshooting#

"A font with this name already exists." Every font in a TeleportHQ project needs a unique name. Change the Name, for example to BakeryScript Bold.

"This field is required" The Name is empty. Type a name. Add font stays greyed out until the name is valid.

"Invalid characters: < , > , { , }" Remove those characters from the Name.

"Invalid or corrupted file" TeleportHQ couldn't read the file. Download the font again from its source, or convert it to .woff2 with a font tool, and upload it again.

A warning says the font file "is … KB. Published as-is: every page that uses this font downloads the whole file." The file is over 150 KB, which is heavy for a web page: every visitor downloads the whole file. The font still works. To make your site faster, convert it to .woff2, or keep only the characters you need with a font tool, then upload the smaller file.

"Custom Font file detected" when uploading in the Assets Manager "Custom Font files can only be added from Project Settings." Click Go to Project Settings, or click Cancel and use the steps above.

"Cannot delete font with existing references" Text or a text style in your project still uses the font. Change those to another font, then click the trash icon (Remove font) next to the font again.

Good to know#

• To add the bold or italic version of your font, upload that file too. Each font in TeleportHQ needs its own name, so each file becomes a separate entry in the Font Family list, for example BakeryScript-Regular and BakeryScript-Bold.
• In the editor, the Font Family list ends with Upload custom fonts. It leaves the editor and opens the project's settings page on its Fonts tab, which has the same Custom fonts section. Go to Project Settings in the Assets Manager opens the same page.
• Uploaded fonts are stored in the fonts folder of the Assets Manager. That folder is managed from Project settings, so you can't rename, move or delete font files from the Assets Manager.
• Remove font (the trash icon) also deletes the font's file, and it doesn't ask you to confirm.
• Custom fonts aren't limited by plan, apart from the file size limit.