# Different fonts in one line

**URL:** <https://community.sitejet.io/t/different-fonts-in-one-line/1245>\
**Category:** Website Builder\
**Tags:** cms\_code, cms\_font\
**Created:** [November 26, 2021, 8:12am UTC](https://community.sitejet.io/t/different-fonts-in-one-line/1245 "2021-11-26T08:12:33Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Barbara\_Bichler](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/barbara_bichler/32/3745_2.png) [@Barbara\_Bichler](https://community.sitejet.io/u/Barbara_Bichler)\
**Post date:** [November 26, 2021, 8:12am UTC](https://community.sitejet.io/t/different-fonts-in-one-line/1245/1 "2021-11-26T08:12:33Z")

</div>

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.

 ![Screenshot 2](https://europe1.discourse-cdn.com/flex017/uploads/sitejet/original/1X/6bc5097ac15d4403cb1ac681c300bb6bd5fea55f.jpeg)

 ![image](https://europe1.discourse-cdn.com/flex017/uploads/sitejet/original/1X/da37f606e8224e87a04202a751f8fcd180b2fe1e.png)

---

<div class="post-metadata">

**Author:** ![Franzi](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/franzi/32/12_2.png) [@Franzi](https://community.sitejet.io/u/Franzi)\
**Post date:** [November 29, 2021, 2:34pm UTC](https://community.sitejet.io/t/different-fonts-in-one-line/1245/2 "2021-11-29T14:34:04Z")

</div>

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:

 ![font-adjustments](https://europe1.discourse-cdn.com/flex017/uploads/sitejet/original/1X/1adbb518a3c40604120138837d69ac3fe801b723.png)

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:

 ![image](https://europe1.discourse-cdn.com/flex017/uploads/sitejet/original/1X/e97a6d622aed1dc083712b7f1ad2e08e08d284f5.png)

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:  
 ![code-icon-text-editor](https://europe1.discourse-cdn.com/flex017/uploads/sitejet/original/1X/fbe609d6c519bdce976e5b7dfe8b4b9f3b8b8412.png)
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.

 ![highlighted-font](https://europe1.discourse-cdn.com/flex017/uploads/sitejet/original/1X/58769dde6cdd74dbfbf354adbed43af55146b475.png)

Hope that helps!

---

<div class="post-metadata">

**Author:** ![Barbara\_Bichler](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/barbara_bichler/32/3745_2.png) [@Barbara\_Bichler](https://community.sitejet.io/u/Barbara_Bichler)\
**Post date:** [November 29, 2021, 7:32pm UTC](https://community.sitejet.io/t/different-fonts-in-one-line/1245/3 "2021-11-29T19:32:18Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Barbara\_Bichler](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/barbara_bichler/32/3745_2.png) [@Barbara\_Bichler](https://community.sitejet.io/u/Barbara_Bichler)\
**Post date:** [November 30, 2021, 3:24pm UTC](https://community.sitejet.io/t/different-fonts-in-one-line/1245/4 "2021-11-30T15:24:03Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Barbara\_Bichler](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/barbara_bichler/32/3745_2.png) [@Barbara\_Bichler](https://community.sitejet.io/u/Barbara_Bichler)\
**Post date:** [December 8, 2021, 2:20pm UTC](https://community.sitejet.io/t/different-fonts-in-one-line/1245/5 "2021-12-08T14:20:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Martin.Sitejet.Team](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/martin.sitejet.team/32/25_2.png) [@Martin.Sitejet.Team](https://community.sitejet.io/u/Martin.Sitejet.Team)\
**Post date:** [December 10, 2021, 2:41pm UTC](https://community.sitejet.io/t/different-fonts-in-one-line/1245/6 "2021-12-10T14:41:13Z")

</div>

Hi @Barbara_Bichler,

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

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

```

 ![Screen Shot 2021-12-10 at 15.33.37](https://europe1.discourse-cdn.com/flex017/uploads/sitejet/original/1X/ca400f4e29d07e434218ba0650a9e9019d2fc2e1.png)

```auto
.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:

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

```

---

<div class="post-metadata">

**Author:** ![Andre](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/andre/32/3459_2.png) [@Andre](https://community.sitejet.io/u/Andre)\
**Post date:** [June 1, 2022, 12:53pm UTC](https://community.sitejet.io/t/different-fonts-in-one-line/1245/7 "2022-06-01T12:53:21Z")

</div>

Closed on June 1, 2022, 12:53pm UTC