All Collections
Widgets and Advanced How-to's
How to upload your own fonts in Super
How to upload your own fonts in Super
Charlene Abranilla avatar
Written by Charlene Abranilla
Updated over a week ago

If you'd like to use a font that is not part of the Super font library, you can load your own font into Super, as long as it is hosted somewhere. Google fonts, Adobe Typekit and Typography.com are examples of services that do this.

Use the font embed code you get from the provider and put this in the Head section of Code and then set the following CSS variables in Super:

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

Make sure to see the fallback font as appropriate for your font selection.

Here is an example of the font embed code from Google fonts that goes in the Head section:

<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">

Did this answer your question?