Change fonts with CSS for specific parts

Hi Nikko,

it is not working. Something has to be wrong.

then check on How to upload custom fonts and the content below it.

I added @import url(‘https://fonts.googleapis.com/css?family=Swanky+and+Moo+Moo’);

Then if you’ve checked Show element options for developers, when you edit any element in Avia Layout Builder, you should see this field at the bottom Custom Css Class

Done.

You can add for example moo

I added a css class called Zitat

then go to Enfold > General Styling > Quick CSS, and add this css code:
.moo {
font-family: ‘Moo Moo’, sans-serif !important;
}

I added
.Zitat {
font-family: ‘Swanky+and+Moo+Moo’, sans-serif !important;
}

if font is properly added then it should display the right font properly.
If that doesn’t work, please post the link to the page where you applied the class so we can check further.

Pleasecheck the website link in the private content.

Hi Nikko,

sorry it’s not working. I make a mistake somewhere. I use the child theme.

I added this:

<link href=”https://fonts.googleapis.com/css?family=Swanky+and+Moo+Moo&#8221; rel=”stylesheet”>

.Zitat p {
font-family: ‘Swanky and Moo Moo’, cursive !important;
}

If I add it to the quick CMS nothing happens. If I add it to the style.css I get tons of errors.

I also tried
@import url(‘https://fonts.googleapis.com/css?family=Swanky+and+Moo+Moo&#8217;);
Then I’ll get no errors but nothing happens.

Is there anything else I have to do?

• This reply was modified 5 years, 11 months ago by MrJoscha.

Now it works somehow. Thanks!

You can close it.