How can I change the font for a specific header on my website?

[Eli90]

Hi,

hope someone would be able to give me a hand because I’m already tried

I’m trying to replace the font for a single header: h2.h1.mega-title.mega-title–large (the “Because life is sweet” sentence).

I tried the following, but it seems like the font changes always to an “Ariel” looking like font every time that I do that… the same if I try using other fonts code instead:

h2.h1.mega-title.mega-title–large {
font-family: Lobster, serif;
}

I do have the “Lobster” font in the Typography library (same as the others I tried using), but it always changes to this boring looking font and I can’t say why. Hope someone will be able to solve it

Website: https://sugar-free-eu.myshopify.com/

password: eveirt

[PageFly-Victor]

Hi @Eli90 .

This is PageFly - Advanced Page Builder.

You can add !important to the font that needs to be displayed so that it takes priority

.hero .mega-title, .hero .mega-subtitle{
font-family: Lobster, serif !important;
}

Hope this helps.

Best Regards;

Pagefly

[KetanKumar]

@Eli90

sorry but did not work

do you need custom font so please add all custom font type OTF, TTF, WOFF, WOFF2, SVG
for this font family Lobster, serif;

[Eli90]

Hi @KetanKumar @PageFly-Victor ,

thank you both very much for the help. I’m not sure why, but it seems like adding a custom font simply doesn’t work for me. I tried a couple of times with different tutorials, and I think it is related to what I see in the screenshot (here I also tried a different font, exactly like the one that was used in the tutorial).

youtube (.com/watch?v=BSJBkT9vLaA)

Also, after I type in the code exactly like I should, the font changes to a boring looking font, although when I inspect the page I see that the font family is: font-family: Audiowide-Regular!important; (like in the tutorial)… same happens when I’m trying it with other headers/text