Hi Beate

You can achieve by either applying the style in text box itself

text

It will work but say you have already applied the css rule for h1 somewhere and above

didn’t work then you want to override the earlier css rules. Then  use ! important after the

css value.

text







 You can also apply the same css rule in css tab in the lower bottom of



edit page. But remember to add tag.above example will be like </pre><pre><b><style><br /></b><b>&nbsp; &nbsp; h1 {<br /></b><b>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;font-size: 2em !important;<br /></b><b>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;color: white !important;<br /></b><b>&nbsp; &nbsp; &nbsp; &nbsp; }<br /></b><b></style></b></pre><pre><b> </b></pre>:)

Customizing fonts is by far the biggest “challenge” in the Unbounce editor. If you don’t know CSS and how CSS selectors work I would recommend googling that first.

The last way that Mahajn listed is the way you want to go. However, have your script tag open with

Also, I don’t recommend using em but using px. every dev has their own preferences you can google why using one or the other may be right for your needs.

The !important tag is as it states important so you make sure that you override any styles that Unbounce may be trying to place on your behalf.

Lastly, for your mobile sizes you can use media queries to dictate the font size at the break point.
@media(max-width:599px) {
h1
{
font-size: 24px !important;
}
}
you have to close both the h1 and the @media(max-width:599px) tag.

Good luck!

Joe

I still can’t do this, my css is as follows:

h1, h2, h3, h4, h5, h6 {

font-family: Georgia, Times, serif, !important;

color: #222;

font-weight: 500;

line-height: 1.0;

font-size: 72px, !important;

}

Am I missing something? Thank you!

Why would you want all of your semantic elements to have the same font size? Wouldn’t you want to break this up into 6 different blocks?

Joe

You can achieve by either applying the style in text box itself