Using Google Fonts in the Classic Builder


Google Fonts is a vast library that offers you a variety of selection of fonts for your landing page for free! Our Classic Builder contains a handful of these Google Fonts to use on your page. 

Adding a Google Font to Your Page

  1. In the Unbounce builder, double-click on the text block you’d like to change to a Google Font.
  2. In the Properties tab on the right side of the Builder, select the Style tab.
  3. Expand the Family drop-down menu and select Add/Remove Font. A new dialog box will appear:google_fonts_drop_down_menu.png
  4. Find the font family you'd like to add (by browsing or using the search function) and click the + button in the top right corner of the font square.
    • Alternately, if you know the name of the font you’d like to add you can use the search bar in the top left corner of the dialog box. You can select and add multiple fonts at the same time.
    • Is the font you're looking for not available? See the section below to learn more.
  5. Click the Done button at the bottom right corner of the dialog box once you’ve selected your font(s).   google_fonts_add_.png
  6. Your newly selected fonts will now appear under the same Family drop-down menu for use on your landing page.

If you’ve added a font by mistake you can remove the font by clicking on the top right corner of the font square again. Fonts that you’re adding will have a green checkmark, and fonts you’re removing will have a red minus sign.google_fonts_remove.png

Adding a Google Font not available in the Library

At this time, the Classic Builder only has a set number of fonts available in the library. However, you can add a custom font from Google to your landing page using some CSS

Pro Tip:

If you would like to use a Google Font on more than one page, you’ll need to repeat these steps for each landing page individually, as added fonts will not sync between pages. Or, you can embed a custom Google font across all your pages using Script Manager

Related Articles

Using Custom Bespoke Fonts and @font-face

Applying a Custom Google Font Across Your Landing Pages

Using Adobe Fonts on Your Landing Pages