How to connect 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. 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

Copy
Full screen
Small screen
<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

Copy
Full screen
Small screen
<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 instruction:


Adding your own code

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

  1. Insert your own code to the block.

Was this article helpful?
Thank you!
Is there anything we can improve? Message
We’re sorry to hear that
Please explain why this article wasn’t helpful to you. Message
Thank you for your feedback!
We’ll review your message and use it to help us improve your experience.
Rate this page
Rate this page
Is there anything we can improve?

Don’t want to answer

Thank you for your feedback!

Useful links

Last updated: July 20, 2021

Found a typo or other text error? Select the text and press Ctrl+Enter.

Report a problem
We always review our content. Your feedback helps us improve it.
Provide an email so we can follow up
Thank you for your feedback!