<- Documentation

Last edited on March 13, 2024

How to upload custom fonts.

You can add more fonts (not Google Fonts) by using the Code Injection feature.

If you're looking to upload custom fonts to your Typedream website, follow these steps to add a unique touch to your site's typography.

1. Prepare Font Files

Gather the font files you want to upload. Ensure they are in compatible formats like .woff or .woff2.

2. Submit Font Files

Send the font files to our support team. We'll take care of uploading them to our Digital Ocean servers securely.

3. Update Site Settings

Once the fonts are uploaded, follow these instructions:

1. Go to your site settings.
2. Navigate to "Code Injection."
3. In the "Site Header" field, (replace the font-family and url values) add the following code snippet:

<style>@font-face {        font-family: 'Geist';         font-weight: 1 1000;        src: url("https://typedream-assets.sfo3.cdn.digitaloceanspaces.com/Font/GeistVariableVF.woff2");      }</style>

4. Apply Custom Font

Now can be accessed by setting font family to the uploaded font based on the written font family above, which is Geist in this case

So can for example using the copy JSON: (see "fontFamily": "Geist")

{
"copyingElement": true,
"element": [{
		"children": [{
			"fontFamily": "Geist",
			"styled": true,
			"text": "Hello Geist",
			"id": "51c50c5a-3e19-4454-ade8-6995a52edfe2"
		}],
		"id": "70771f96-a0b9-4ee3-8153-7893e37afa78",
		"type": "h1"
	}]
}

The code above will look like this:

Hello Geist

🎉 Done

That's it! Your custom font is now applied to the specified elements on your Typedream website.