Change the heading font

Add a second font

First, you need to add a link to a font to your website that you want to use as a secondary font.

📖 Add a Google font

📖 Add an Adobe font

Once you've added a reference to a new font, you can decide whether to apply the different font to all headings on your website or just specific sections.

Apply to all titles

1. Go to the web projects homepage and click Settings then Code Injection,
2. Copy and paste this code into the "` tag code" box:

   <style>
   .OverrideDefaultBlockItem--title,
   .OverrideMainBlockItem--title,
   .OverrideMainItem--title,
   .OverrideGridBlockItem--title,
   .OverrideColumnBlockItem--title,
   .OverrideLinearBlockItem--title,
   .OverrideFeedPageHeader--title,
   .OverrideContentPageHeader--title,
   .OverrideFeedBlockItem--title {
   font-family: "Inter", serif;
   }
   </style>

3. Change the value of "Inter", serif to the name of the font family you installed,
4. Click the check mark to confirm that the code is safe and then click "Save".

Apply to specific sections

1. Create a section on a page,
2. Enter the title text and save,
3. Click the button with the table icon next to the section,
4. Click "Add" and enter the word class in the "Key" field and then the word CustomHeading in the "Value" field and click "Save",
5. Go back to the web projects homepage and click Settings then Code injectione,
6. Copy and paste this code into the "" tag code box:

   <style>
   .CustomHeading .OverrideDefaultBlockItem--title,
   .CustomHeading .OverrideMainBlockItem--title,
   .CustomHeading .OverrideMainItem--title,
   .CustomHeading .OverrideGridBlockItem--title,
   .CustomHeading .OverrideColumnBlockItem--title,
   .CustomHeading .OverrideLinearBlockItem--title,
   .CustomHeading .OverrideFeedPageHeader--title,
   .CustomHeading .OverrideContentPageHeader--title,
   .CustomHeading .OverrideFeedBlockItem--title {
   font-family: "Inter", serif;
   }
   </style>

7. Change the value of `"Inter", serif` to the name of the font family you installed,
8. Click the checkbox to confirm that the code is safe and then click "Save".