Different fonts in one line

[Barbara_Bichler]

Can somebody help me how to create something like this in Sitejet?
I want to set highlighted words within a line with “normal” font.
Sometimes clients request coloured underlined words or single words with calligraphy fonts.

[Franzi]

Hey @Barbara_Bichler,

thanks for reaching out with your question.

First things first: You can change the font family, color, and size of a font within our text editor. So to create these calligraphy-styled words simply click on the text element where you want to make the adjustments, highlight the word or word group you want to change, and then follow these steps:

1. Change the font family to e.g. Dancing Script, a calligraphy-style font.
   Tip: You cannot find the font family you are looking for? Then head over to Design > Font first and upload a custom font or add available Google Fonts to your selected Fonts for this website by clicking the “+” button. Save your changes and head back to the text element. Now, you should see your new selected fonts.
2. Change the font size to match your needs.
3. Change the font color.

Once you made the changes, it can look like this:

To add the “underline effect” you will need to:

1. Add this CSS class (Go to <> in the top navigation and open the CSS)
   .highlighted {
   background: linear-gradient(0deg, yellow 50%, transparent 50%);
   }
2. Click on the text element where you want to make the adjustments and select the code icon ( </> ) in the text editor bar:
   
   
3. This will open an HTML panel where you can see the text. Search for the word you want to highlight and add this code: <span class="highlighted">Your word</span> - of course you will have to change “your word” to whatever you want to highlight. Once that’s done the CSS class we defined in Step 1 will be applied to this word. By the way, you can also still make adjustments to text editor bar as we did for the calligraphy-styled words, e.g. make it bold or make the font size bigger etc.

Hope that helps!

[Barbara_Bichler]

Amazing! Thank you so much. I thought way too complicated (regarding different fonts in one line). The very detailed tutorial how to set the highlight effect is fantastic because I am a non-coder I will try it right away.

[Barbara_Bichler]

I found out that when I set single words in special (bigger) handwriting font, it creates a little space between that and the next line. As in your screenshot, too. Is there a way to get the full text in that line spacing?

[Barbara_Bichler]

This works fine in paragraph elements but how does this work in headlines?

[Martin]

Hi @Barbara_Bichler,

you can add a tag and nest your word or text between the opening and closing tag.

<h2 contenteditable="true" data-gramm="false" spellcheck="false"><span class="color-background">New <span class="headline-lower-highlight">highlighted</span> headline</span></h2>

.headline-lower-highlight {
    background: linear-gradient(120deg, #fffb05 0%, #fffb05 100%);
    background-repeat: no-repeat;
    background-size: 100% 40%;
    background-position: 0 80%;
}

To avoid the spacing between the lines with bigger special fonts, you can set a bigger line height in the website theme settings, or you add the line-height property to your custom CSS class:

.custom-line-height {
line-height: 1.6; 
}