How to use custom fonts to your site

How it works

If you don’t want to use the default fonts available in Site Builder, you can connect different fonts from the Google Fonts catalogue for headers or body text via a custom HTML code. You may use an existing solution or add your own code.

How to get it

Using an existing solution

1. Open your project in Publisher Account.
2. In the side bar click Site Builder.
3. Click Open Site Builder.
4. 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>

5. Click Preview to see your changes.

Watch the tutorial video for this instruction:

Adding your own code

1. In the Builder, click Add block and choose Custom code.

2. Insert your own code to the block.

Useful links