Introduction

With the Font Book option, you can easily add your Google Fonts loaded from your local hosting, not Google server, or upload your custom fonts. The first feature was created mostly for the EU webmasters and the European Economic Area (EEA). The General Data Protection Regulation (GDPR) law enforces the avoidance of services such as Google Fonts, whose resources are loaded directly from Google's (US) servers. So the safe way is to download the font files and upload them to your local server through our SPPB Font Book, making it GDPR compliant. If you are not an EU webmaster and your website is not for the EU area you don't have to use that feature. Anytime you use Google Fonts in a classic way, for example, set them in general from Template Options for Body, Navigation, and selected H1-H6 headers.

How to Integrate Google Fonts?

To upload your Google Fonts go to https://developers.google.com/fonts/docs/developer_api and scroll down to locate the “Get a Key” section. Click on the “Get a Key” button and choose your project. 

Click on the Next button to proceed and your API key will be generated now.

Copy the API Key and hit Done.

Now go back to the SP Page Builder 5 dashboard and navigate to Settings > Advanced. Locate the Google Fonts API Key field and enter the copied API Key. Save the changes and go back to the Font Book option. You should be able to see your Google Fonts loaded at this point. 

Now search for your desired Google Font and click on the add button that shows up upon hovering. Select your font style and hit Add Styles.

You can view your added fonts from the Installed Fonts option. 

How to Install Custom Fonts?

SP Page Builder 5 also lets you upload your own custom fonts. 

1. To install your custom fonts, download or save the font in .TTF or .OTF format. 
2. Then 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. Tick the agreement section.
6. Click Download your kit
7. Once it is finished downloading, you will be left with a Webfont kit zip file. 
8. Then from the Font Book option click on the Upload Font button (you can find it in Google Fonts and Installed Fonts). 
9. Upload your font zip file, then should be displayed on the list of fonts.
   

Video guide: https://www.youtube.com/watch?v=k0jw03dLBEg

Remember! You can upload only one font file per zip package. Yes, you can upload more fonts by repeating the steps. For the sake of website performance, we do not recommend using more than 3 different fonts. This is because each additional font has to be loaded before the actual content, which is likely to reduce your Google speed rating.

Notice! If you have a problem with file upload, check if the PHP setting for memory_limit - value must be above 128M.

How to Remove Any Installed Fonts?

To remove any of the installed fonts go to the Installed Fonts option and simply click on the Remove button that shows up upon hovering.