[Support request] How to mix different fonts in one headline?

Hi there,

If you have 1 x Headline for the Blue text, and a separate Headline for the Orange text then you could style the Orange text using the Highlight text option.

1. Add the orange text to your headline.
2. With the block selected in Advanced > Additional CSS Class(es) add: custom-higlight
3. Select the text you want for in the different font, and from the Toolbar dropdown menu select Hightlight.
This will add the gb-highlight class to that text.
4. Use some CSS to change the font:

.custom-highlight .gb-highlight {
    font-family: 'your font here';
}

You will need to make sure that highlight font is being loaded on your site.

To have the three various styles means you would have to use a HTML block instead of the Headline. The HTML would look like this:

<h1 class="my-custom-heading">This text is the default text style <span class="color">this text begins the color change <span class="font">this text is in other font </span>this is color text normal font</span></h1>

And the CSS would be something like this:

h1.my-custom-heading {
    font-weight: bold;
}
h1.my-custom-heading .color {
    color: #E84A1D;
}
h1.my-custom-heading .font {
    font-family: Sign Painter HouseScript Regular;
    font-size: 56px;
}

You can change the CSS selector: my-custom-heading to any unique name you want, but you must change it in the HTML and all instance of the CSS.