Google Fonts

[gsam]

What is the best way to use include Google Fonts in the Shadows ReadyTheme?

[RTHOMASDESIGN]

You can add an external stylesheet under CSS resources (example below), and then under resource groups make sure to assign it to css_list. Alternatively, you can add additional fonts to the existing "google-fonts". Each font is separated by a pike in the filepath... (Poppins:400,800|Playfair+Display|Lora:400,700). Alternatively, you can simply do an @import in your stylesheet.

[gsam]

I'm wording on dev.paddletramps.com and something is not working right with google fonts.

I added the google font: https://fonts.googleapis.com/css?family=Poppins:400,800 | Rancho
I added the CSS: h3{font-family:'Rancho'; color:red;}

Inspecting the About Us section on the SFNT, the h3 properties show the Rancho font and the color red. And, page shows the font in red but it is not the Rancho font style.

Does anyone have an idea of what is going on?

[Matt Zimmermann]

Hi Gary,

Which method did you use to add the call to the font from Google?

[gsam]

I used the existing CSS Resource, google-fonts. This resource was already activated and global.



I edited the File Path and added 'Rancho' to the end. I noticed that the Tag Attribute automatically updated itself and added Rancho to the end.
I then checked the Resource Groups where I see the css_list, and in that group, google-fonts is assigned and Globally activated.

If I understand your question I thought this is all I needed to call the font from Google. After it loads, I thought all I needed to do was add a CSS rule to use the Rancho font. Am I missing something?

[Matt Zimmermann]

Hi Gary,

It looks like you have spaces in the file path to the fonts and are missing the rel attribute. Update your path to this and add the rel="stylesheet" attribute to the tag:

https://fonts.googleapis.com/css?family=Poppins:400,800|Rancho

[gsam]

Thanks, Matt
I got it working.