How to add custom fonts to your site

Adding in 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. Typically, adding in custom fonts has required some custom coding, however through this guide, we will attempt to walk you through the steps in order to get it into your PageCloud pages.

If you are looking for a simpler way to add in fonts and don't specifically need a certain custom font, check out our integrations with Google Fonts or Adobe Typekit .

Please Note: This technique is a bit advanced and requires the use of a third party tool from Font Squirrel for some of the setup. Depending on the font file you are using, it may not be supported by Font Squirrel which could prevent this guide from working out. While we would love to support every font out there, depending on how some are setup, or the type of file you currently have, you may still need to enlist the support of a developer to make use of it if the Font Squirrel method is not possible for you. For more information on the Font Squirrel Webfont Generator - feel free to visit https://www.fontsquirrel.com/blog/2010/12/how-to-use-the-generator .  

As an additional note, different devices and browsers can render fonts in different ways. We would encourage you to test out how it looks on various browsers and devices to ensure the font displays correctly.

Step 1: Getting your Font File for your desired font

Download or locate the file for your custom font. In order to use the Font Squirrel Webfont Generator, you will need to have the file in .TTF or .OTF file formats. There are many resources online for downloading fonts such as through Font Squirrel directly.

Step 2: Creating your Font Kit through Font Squirrel

Go to the Font Squirrel Webfont Generator and click the Upload Fonts button to select your .TTF or .OTF file located on your computer. Once that's done, you can select the output of the files - We would recommend using the Basic or Optimal settings unless you are comfortable with the Expert Settings. Lastly, you can check the agreement in order to generate your fonts and click "Download Your Kit".


Step 3: Locating your Font Kit on your computer

Once it's completed downloading, you will be left with a webfontkit zip file. Unzip that to your computer and open up the folder. You should see something along the lines of the files found in the screenshot below. This will sometimes vary based on the font but you should be looking for the .WOFF and .WOFF2 files, as well as the stylesheet.css file. You may also see files ending in .ttf or .eot as well. If your kit happens to have these files, they can be used in the same manner as our guide explains below for .woff and .woff2 files as these will help the font render properly on other devices and platforms where .woff and .woff2 may not be supported.

Step 4: Opening the Stylesheet.css file in your text editor

Open up the stylesheet.css file in a text editor. You can use the basic text editor that is available on your computer such as textedit for Mac or Notepad for Windows, or one of your preference. The result should look like this:

If your particular font came with .eot or .ttf files as well, the stylesheet should reference those formats as well.

Step 5: Creating download links for your Font Files

Open up your PageCloud Page and drag your .WOFF and .WOFF2 files in (as well as .eot or .ttf if they were included), then drop them onto your page. This will create download buttons. The purpose for these will be to grab the links to their downloadable files, now hosted on your website, and insert that into the stylesheet.css document from the above step.

Right click on one of the files, for example, the .woff2 file, and hit 'Copy Link Address'

Step 6: Inserting your download links in your stylesheet.css file

Now go to your text editor, and locate the file name you just copied the link for. In this example, we will be looking for blackjack-webfont.woff2

Hightlight the file name within the single quotations (make sure the single quotations remain there) and paste in the address you copied in the step above. You should be left with something like this:

Step 7: Repeat for the other Font File

Now go back and repeat Step 5 and Step 6 for the .WOFF file. You will be left with the following, with links to the font files within your code.

Step 8: Copy your code block from the stylesheet.css file

Copy the code within the text editor beginning with the @font-face { and ending with the closing } bracket 

Step 9: Adding your code block to your PageCloud page

Navigate back to your PageCloud page, and go into the 'Page' tab in the right hand editing palette, then click on the <head> editor at the bottom. More information on the PageCloud <head> editor can be found here.

The <head> editor will open up. Depending on how complex your page is, you may already have some code in here.

You will be looking to locate the <style type="text/css"></style> block as we will be inserting this code inbetween those two tags.

Paste the code you copied from your text editor inbetween, like the attached image below. If it helps, place your cursor after the > and before the </ and press Enter/Return twice to give yourself some space to paste it in.

Click Save & Close

Step 10: Test the font and delete the download buttons

Create a text box, or edit an existing text box on your page and go to the font drop down. You should now see your font listed in there with the (Custom) tag attached at the end, indicating the source of this font.

You may now select the two Download buttons you created on your site and delete them from your page using Delete or Backspace as they are no longer needed on your page (They must remain on the server though).

Step 11: Adding the font to additional pages within your site

In order to add this font to your additional pages, simply copy the code you pasted in from Step 8 and paste it in the same spot within the <head> editor on each additional page you'd like that font to be on. This will then make that font accessible on the page.





Thank you! Your comment has been submitted for approval.

Was this article helpful?
Thank you for your feedback!