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