So, you wanna use custom fonts in Super? That’s cute.

Let’s be honest, you’re probably using Super because you’re not an engineer. Unfortunately, using custom fonts is not a “no-code” process, but fortunately, it is a “low-code” process and I’ve outlined a working solution for you here.

To use custom fonts on a Super site, follow the steps below to host your fonts on GitHub, get a CDN link for these files, and apply them to your site using CSS.

01 Font files

I’m going to assume you already have font files downloaded and ready to use (because I don’t want to know where you got them). If necessary, convert them into WOFF files for web.

02 Github repo

Locate or create your GitHub repo where you want to host your font files. If you’re new to Github, view the quickstart guide to get set up.

03 Upload font files

In your GitHub repo, go to Add File > Upload Files. Upload your files and monitor the commit to completion. Grab the permalink for your newly uploaded file by going to [•••] in upper right > Copy permalink.

Example GitHub permalink:

https://github.com/siegs/siegs.github.io/blob/6170e8b586db3279973c3fa63d061034ece466f7/folio/KarmellaRegular.woff

This is your font file’s URL on GitHub, but you still need a CDN to use it on an external site.

04 CDN link for your font files

Find a free GitHub > CDN service. I used jsDelivr and it worked great (as of Sept ‘23).

You can go to https://www.jsdelivr.com/github and paste your GitHub font file permalink to get a CDN link.

Example CDN link:

https://github.com/siegs/siegs.github.io/blob/6170e8b586db3279973c3fa63d061034ece466f7/folio/KarmellaRegular.woff

05 Use the @font-face rule to import your font

In your custom code, navigate to CSS and use the @font-face rule to specify the name of your font and source of your CDN link so that visitors of your site can use your custom font.

Example @font-face CSS rule:

@font-face {
font-family: "karmellaregular";
src: url("https://cdn.jsdelivr.net/gh/siegs/siegs.github.io@6170e8b586db3279973c3fa63d061034ece466f7/folio/KarmellaRegular.woff");
}

(note: there’s another solution using HTML but I’ve focused this guide on CSS-only solutions)

06 Apply your custom font in CSS

You can now reference your custom font in CSS to apply to specific elements. For example, apply your font to all page titles using the title class.

Example CSS declaration:

.notion-header__title {
font-family: "karmellaregular", sans-serif !important;
}

Enjoy your beautiful fonts!

Aren’t they beautiful? Just remember that custom fonts will add more weight to your website’s loading speed. There are undoubtedly ways to speed this up, but that’s for another day.