Add custom fonts to your Super site

Although uploading custom fonts will soon be as easy as uploading a font within your site settings, many of you are wondering if it's possible now. We'll cover how to use custom fonts using our handy code injection feature. Fonts need to be hosted somewhere to link to them. Most cloud sharing services could work, but why not use a tool you're likely already using? Enter, Notion.

Step 1

Create a new page within your Super site in Notion, then upload the fonts you want to use with the /file block. It's important that your site is already set up with Super and has a custom domain. Don't worry if your Fonts page is visible, we can use some simple CSS to hide it later.

A
A .ttf, .woff, and .woff2 would be the minimum we'd recommend to maximize browser support. If you only have a .ttf file, you can use a webfont generator to get the others.

Step 2

Once your files are uploaded, save your changes, and visit that page on your live website domain. Right click on the font names, and choose Copy Link Address. Make sure to save these links somewhere or keep that page open, as we'll need them in the next few steps.

image

Step 3

Copy and paste the code below into the snippet injection part of your Super site settings.

<style>
	@font-face {
	  font-family: 'font-name';
	  src: url('font-url') format('woff'),
				 url('font-url') format('woff2'),
				 url('font-url') format('truetype');
	}
	* {
	  font-family: 'font-name', sans-serif !important;
	}
</style>
The * will apply the font to every element on the page, and is sort of the quick and dirty option. It's better to target the specific elements you need to apply the font to (h1, a, p, etc.)

Step 4

Replace the font-name in the code above with the exact name of the font that's shown

Replace the font-url for each font type (.woff, .woff2, .ttf).

Things to remember:

  • Fonts not loaded from a CDN can have a negative impact on site performance
  • Deleting your Fonts page will prevent them from showing up on your site
Copied