Docs

[garethvaughan]

I have read several of the posts regarding adding in your own additional Google fonts to the theme. e.g. https://community.theme.co/forums/topic/google-font-not-displaying/

I have followed the steps, i.e. downloaded the child theme, added the new code in the functions file, added a new style in the customiser. I have managed to make the font appear on my site for a piece of text but only if I use inline styles. e.g.

<span style=”font-size: 42px; color: #cc0000; font-family: ‘Trocchi’, serif !important;“>Regular Text</span>

but if I use the following:

<span class=”font-trocchi”>Regular CSS</span>

the font is removed from the stylesheet:

.font-trocchi {
color: #cc0000 !important;
}

when this is what I have listed in the customiser:

.font-trocchi {
font-family:font-family: ‘Trocchi’, serif !important;
color:#cc0000 !important;
}

The colour is displayed but the font does not change. Have you any suggestions?

[Rue Nel]

Hello There,

Thanks for writing in!

Before this code will work;

<span class="font-trocchi">Regular CSS</span>

You will need a custom css like you have;

.font-trocchi {
  font-family:font-family: 'Trocchi', serif !important;
  color:#cc0000 !important;
}

The only problem is that the Goggle font is not loaded yet. Please have the custom css updated and use this instead:

@import url('https://fonts.googleapis.com/css?family=Trocchi');
.font-trocchi {
  font-family:font-family: 'Trocchi', serif !important;
  color:#cc0000 !important;
}

We would loved to know if this has work for you. Thank you.

[Author]

Posts