Google Fonts not displaying

[jennaluck]

Hi,

I have 3 Google Fonts in use on my site. The Heading font and Body font are displaying correctly.
I have also defined a 3rd font as follows…

@import url(https://fonts.googleapis.com/css?family=Great+Vibes:700,400,300);
h6 {
color: #1b6962 !important;
font-weight: 700 !important;
font-size:180% !important;
font-family: ‘Great Vibes’, cursive !important;
text-transform: none;
letter-spacing: 2px;
}

This one only displays correctly if the font is installed on the computer (also works on phones ok), but doesn’t display if not installed.

Is there a way to get that to work correctly?

Website is https://thesoundtemple.com.au/

many thanks.

[jennaluck]

Tried this as well but didnt make any difference… (also cleared page cache to test it)

Please remove this code in the custom CSS panel:

@import url(‘https://fonts.googleapis.com/css?family=Great+Vibes’);

Then add this code in the child theme’s style.css: (added it to functions.php rather than style.css

/**

• Enqueue scripts and styles.
  */
  add_action( ‘wp_enqueue_scripts’, ‘load_script’ );
  function load_script() {
  wp_enqueue_style( ‘google-font’, ‘https://fonts.googleapis.com/css?family=Great+Vibes’);
  }
  This should load the font on your site.

[jade]

Hi there,

Is there a reason why you are manually adding the font?

You can actually add it in the Font Manager which you can find in the Theme Options.

First, you will need to enable the font manager in the Typography settings.

Then click on the cog icon to launch the settings modal and you can add the font there:

[jennaluck]

Yes I have added it to the Font Manager as Font 3 previously. The body and heading fonts are setup in Typography (and I have now added them to the appropriate section in Font Manager) however they were already working. It is only Font 3 that seems to be a problem on desktops - it displays correctly on my phone and on desktops with that font.

I couldn’t see any further option in Typography to specifically enable Font Manager other than to add in the Body and Heading font definitions that I had already setup in there.

many thanks for your suggestions
Jenna

PS Hi Christopher,

Thanks for your comments below, I have set it up that way now but unsure how I can use the 3rd Font as a reference to style just H1 tags and also special purpose text which I have classed as ‘script’ in my CSS.

[christopher]

Hi jennaluck,

You have the ability to add an Unlimited number of these fonts in the font manager. Please read this article for more information.

So you can go to the X > Theme Options > Settings Icon (bottom left side) > fonts and add another container for example with the name of 3rd font:

You will need to double-click on the name of the container to change the name to whatever you want.

Then whenever you go to an element option you have 2 options to select the font:

1. Heading
2. Body Copy
3. 3rd Font

Thank you.