How to Upload Your Own Fonts in Super

Using Custom Fonts in Super

Super comes with a built-in font library, but you’re not limited to it. If you want to use a custom font that isn’t available in Super by default, you can absolutely do that—as long as the font is hosted online.

Common font providers include:

• Google Fonts (free and beginner-friendly)
• Adobe Fonts (Typekit)
• Typography.com

These services host the font files for you and provide an embed code that you can add to your Super site.

Step 1: Get the Font Embed Code

Go to your font provider and copy the embed code they give you.

For example, from Google Fonts, after selecting your fonts, you’ll get something like this:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quattrocento:wght@400;700&family=Space+Grotesk:wght@300;400&display=swap" rel="stylesheet">

This code tells the browser where to load the fonts from.

Step 2: Add the Embed Code to Super

1. Open your site in Super
2. Go to Code
3. Paste the font embed code into the Head section
4. Save your changes

This makes the font available to your site.

Step 3: Tell Super Which Fonts to Use

Super uses CSS variables to control fonts across your site. Once the font is loaded, you just need to assign it.

Add the following CSS (usually in the Code → CSS section):

:root {
  --primary-font: 'FONT NAME', sans-serif !important;
  --secondary-font: 'FONT NAME 2', serif !important;
}

What this means:

• -primary-font is typically used for headings
• -secondary-font is typically used for body text
• Replace FONT NAME with the exact font name from the provider
• The second value (serif or sans-serif) is a fallback font

Why Fallback Fonts Matter

Fallback fonts are used if:

• The custom font fails to load
• The visitor has a slow connection
• There’s a temporary issue with the font provider

At a minimum, always include:

• sans-serif for modern, clean fonts
• serif for traditional or editorial fonts

Example with real font names:

:root {
  --primary-font: 'Space Grotesk', sans-serif !important;
  --secondary-font: 'Quattrocento', serif !important;
}

Hosting Fonts with GitHub (Advanced Option)

If your font is not available on Google Fonts or Super fonts built-in library you can host the font files yourself using GitHub. This allows you to load custom fonts into Super by linking directly to the font files stored in a public GitHub repository.

Helpful Guides for GitHub Font Hosting

These resources walk through the process step by step:

• https://stackoverflow.com/questions/39693837/how-do-i-use-github-to-host-a-webfont#39699583
• https://github.com/KarlPiper/Github-Font-Hosting

These guides explain how to upload font files (such as .woff or .woff2) and reference them using CSS.

Setting the Fonts in Super

Once your fonts are hosted and properly loaded, you can assign them in Super using CSS variables.

Add the following CSS to your Code → CSS section in Super:

:root {
--primary-font: FONTNAME, FALLBACK-FONTNAME!important;
--secondary-font: FONTNAME, FALLBACK-FONTNAME!important;
}

What this does:

• -primary-font controls the font used for headings
• -secondary-font controls the font used for body text
• Replace FONTNAME with the exact name of your custom font
• Replace FALLBACK-FONTNAME with a fallback font

Choosing Fallback Fonts

Fallback fonts are important in case your custom font:

• Fails to load
• Is blocked
• Loads slowly on a user’s connection

Fallbacks can be:

• Generic: serif or sans-serif
• More specific: Arial, Georgia, Times New Roman, etc.

At a minimum, always include either:

• sans-serif for modern fonts
• serif for traditional or editorial fonts

Example:

--primary-font:'MyCustomFont', sans-serif!important;

Important Licensing Note

⚠️ Be careful with paid or proprietary fonts

Fonts hosted on GitHub are publicly accessible, which means anyone could download them. Because of this, this method is not recommended for purchased or licensed fonts unless your license explicitly allows public hosting.

For paid fonts, it’s best to:

• Use the provider’s official hosting service, or
• Follow their specific self-hosting guidelines