Applying a custom font

How It Works

If fonts available in Site Builder by default do not suit you, you can apply another font from the Google Fonts catalogue for headers or the 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.

Here is the tutorial video for this recipe: