Applying a Custom Google Font Across Your Landing Pages

This article will describe how to add a Google font to all the pages on your domain through stylesheets (CSS), using Unbounce's Script Manager.

Follow these steps to embed a custom Google font on your landing page.

Retrieving a Custom Font Link from Google's Font Library

1. Navigate to Google's Font Library and locate the font you'd like to use on your landing page.
   • Once selected, a new window will appear where you will have the option to choose a style.
2. Once you find a font style that you are happy with, click the + Select this style button:
   
3. View the selected font style by clicking on the window icon in the top right-hand corner of the page:
   
   
   A small window will appear on the right, which holds the keys to applying this Google font to your Unbounce page and making it awesome!
4. You will now need to import the font into Unbounce. To start, copy the link tag provided by the Google Fonts page:
   
5. Once you've copied this link tag, navigate back to Unbounce. 

Importing a Google Font into Unbounce

Create a new script with Unbounce's Script Manager. This is where we'll paste the copied link tag from Google Fonts. 

1. Log in to Unbounce, and from the left-hand side menu, click Settings.
2. From the drop-down menu, select Script Manager. 
3. Click the blue Add a Script button on the top-right hand corner. 
4. From the pop-up, select a Custom Script from the drop-down menu, and give your script a name:
   

Two panels will appear; update the fields with the following values: 

• Within the Script Details tab, set the Placement to the Head, and the Included on value to Main Landing Page.
• Paste the copied link tag from Google Fonts in the dialog box.
• In the Script Usage tab, select which subdomain(s) you'd like to apply the font to:
  
• Don't forget to Save and Publish the script!

Now that we have successfully imported the font, we'll need to add another script to apply the CSS rule, that will work to apply the font to your page!

Adding CSS Rules from Google's Font Library 

1. Navigate back to the Google Font library.
2. This time, locate the CSS rule to specify the font-family from Google:
   

We will use this rule to create a script that will apply the font to your domain.

Unbounce provides a few different scripts for applying custom fonts to different parts of your page, which you can see in our Custom Fonts documentation. In this example, we will apply the font to the entire page using this script:

1. Copy the above CSS script from, and navigate back to Unbounce. 
2. Create a new script in Script Manager, this time, for the CSS rule. 
3. Within the script, replace 'MyFontName' with the font rule provided by Google. 

In this example: 'Viaoda Libre', cursive. 

4. We will use the same placements as our previous script in Step 3 by adding it to the Head of the page and including it on the Main Landing Page. Don't forget to select your domain and to Save and Publish Script!
   

By the end of this documentation, you should have two scripts in Script Manager: one that links the custom font from Google onto your landing page and another that applies the CSS rule. 

Viewing your Custom Font 

To see this font appear on your landing page, you will need to publish your page, or, visit your page in Preview mode. Custom CSS and scripts work only upon page load, not within the Unbounce Builder. 

When you view your published page, clear your browser cache, or test the link in an incognito window to see the most up-to-date version. 

Et Voila! You have now applied a Google Font to your entire domain! Way to go, champ! 💪