How to add custom fonts to your Site

Adding custom fonts can be incredibly valuable, especially if you've used these fonts before to help build up your branding and want to continue using them. 

If you are looking for a simpler way to add unique custom fonts, you should check out our integrations with Google Fonts or Adobe Typekit .

This is an advanced feature and requires the use of a third party tool from Font Squirrel. Depending on the font file you are using, it may not be supported by Font Squirrel which could prevent this guide from working. 

Creating a .WOFF and .WOFF2 Version of the custom font

If you already have a .WOFF and .WOFF2 version of your font, You can head to "Add Custom Fonts to your Page" 

1. Download or locate the file for your custom font. There are many sources online for downloading fonts. It must be downloaded as .TTF or OTF file. You can also download the font directly through Font Squirrel.
2. Go to the Font Squirrel Webfont Generator.
3. Click the Upload Fonts button to select your .TTF or .OTF file
4. Select the output of the files (we recommend using the Basic or Optimal settings unless you are comfortable with the Expert Settings).
5. Click Download you kit.
6. Once it's finished downloading, you will be left with a webfontkit zip file. Unzip that to your computer and open up the folder to find the .WOFF and .WOFF2 font files. 

Add Custom Fonts to your Page - Using .WOFF and .WOFF2 files.

1. Head to your Page you would like to add the custom fonts to within edit mode.
2. Drag in your .WOFF and .WOFF2 files and drop them onto your page. This will create download buttons.
3. Select both .WOFF and .WOFF2 files. 
4. Head to this action page and drag over the "Drag Me" box found in Step 3 onto the page with the selected files.
5. This will open up a dialogue box to name the font you've added. Use the name of the font. 
6. Save the page. 
7. You will now have access to the custom font file while creating or editing text boxes. 

Different devices and browsers can render fonts in different ways. We encourage you to test out how the font looks on various browsers and devices.