Applying a custom font

How It Works

If you don't want to use the default fonts available in Site Builder, you can apply a different font from the Google Fonts catalogue for headers or body text.

Who Can Use It

Partners who have already integrated Site Builder.

How to Get It

  1. Go to Publisher Account > Site Builder.
  2. Insert the font’s URL into the Custom code block and specify the style classes for which the font-family value should be changed.

Example of changing the header font

<style>
@import url('https://fonts.googleapis.com/css?family=Playfair+Display&display=swap');

  .custom-header-font h1,
  .custom-header-font h2,
  .custom-header-font h3,
  .custom-header-font h4,
  .custom-header-font h5,
  .custom-header-font h6 {
    font-family: 'Playfair Display';
  }
</style>

Example of changing the body text font

<style>
  @import url('https://fonts.googleapis.com/css?family=Playfair+Display&display=swap');

  .custom-main-font {
    font-family: 'Playfair Display';
  }
</style>

  1. Click Preview to see your changes.

Watch the tutorial video for this recipe: