H1 formatting help - unsupported CSS?

J

Hi all!

I’m trying to style my H1’s with some custom CSS. However, Unbounce doesn’t appear to be liking the bulk of it…

<style>
h1 { 
color: #ffffff;
font-family: 'Montserrat', sans-serif;
font-size: 75px;
line-height: 70px;
font-weight: 900;
letter-spacing: -1px;
text-transform: uppercase;
}
 </style>

Just in case, I have also imported ‘Montserrat’ from Google Fonts, just in case this was the issue.

<style>
@import url('https://fonts.googleapis.com/css?family=Montserrat');
</style>

I’m desperate for the font-weight and letter spacing.

Here’s the page: http://promotions.futurefit.co.uk/bl4nk-p4g3330/

Thanks in advance all!

Jack

4 replies

Jess
Rank
Userlevel 7
Badge +1

Hey Jack!

Stylesheets can be tricky, but don’t worry! I’ve got a solution that I think might work for you:

The page builder applies styling inline, so sometimes you’ll need the odd !important to override the builder styling. Like so:

Let me know how that goes! 👋

J

Superstar, thank you! 😀

The font weight didn’t work, but I can live with that!

digibomb
Userlevel 6
Badge +1

As @Jess already mentioned, it is essential to add “!important” to any element that unbounce renders, it’s the only way to have your rule be applied.

For font weight, you need to import the weights you want to use fro example:

<style>
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,900');
</style>

That should do the trick. You can add more weights if you choose.

Good luck!

J

Thank you very much! 🙌

Reply


Terms & ConditionsCookie settings