Docs

[Shan_HBG]

Hello,

I am using Open Sans on my site. I’d like to use the different weights of the family (see them here: https://www.google.com/fonts#UsePlace:use/Collection:Open+Sans).

For some reason, when I try the font-weight property in my CSS stylesheet, it has no effect on the type. Not even if I add “!important” to the command.

Can you please help me?

[Shan_HBG]

This reply has been marked as private.

[Shan_HBG]

This reply has been marked as private.

[Nico]

Hi There,

Thanks for writing in.

I have tried this code in your custom CSS and it working great. The class adjusts the texts of the testimonials.

Hope it helps.

Let us know how it goes.

Thanks.

[Shan_HBG]

Hello,

Do you mean the CSS that I pasted in the private box works for you? I tried it again just now (in Chrome and in Safari on a Mac), and it does not change the font weight. I want it to show Open Sans Light 300, but it just looks like the regular Open Sans.

Can you please help?
Shannon

[Rad]

Hi there,

Yes, it’s working. But the smallest weight loaded on your site is 400. You can check it here http://fonts.googleapis.com/css?family=Lora%3A400%2C400italic%2C700%2C700italic%7COpen+Sans%3A600%2C400%7CGive+You+Glory%3A400&subset=latin%2Clatin-ext&ver=4.4.2

Would you mind providing your admin login credentials in private reply?

Thanks!

[Shan_HBG]

Does that mean that I need to load more weights in order to display Open San Light, which is 300? Would I add this code to my css (see below)?

<link href='https://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>

I’ll post a private reply with an admin login.

[Shan_HBG]

This reply has been marked as private.

[Rupok]

Hi there,

Certainly you need to the weight to use them. But you don’t need to load each weight separately.

Let’s select the weights – http://prntscr.com/ba20a4

And then copy the CSS link :

<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>

Now you can use the weights 300,400,600 and 700.

Hope this makes sense.

[Shan_HBG]

Do I paste this link into my CSS editor?

Also, the font-weight worked on a few main headlines on the page, but it still has no effect on the class .Testimonial (the area in my screenshot from my earlier reply–in the dark gray band on the page).

[Rupok]

Hi there,

That’s already answered. Kindly follow the reply carefully. You can paste the code or select your own weights and grab the link from google font site. And I can see the font-weight is working fine on the mentioned element. Make sure to load all the font-weight you are trying to use.

Thanks

[Shan_HBG]

Hi,

I’m not trying to be difficult, but I did read the reply carefully, and I am confused.

It says to copy the CSS link. I copied it, but where do I paste it? Do I put it in the custom CSS editor? (I did paste it in the custom CSS editor. Then I refreshed my page, but the .Testimonial class did not change.)

Can you please help me understand?

Thank you,
Shannon

[Christopher]

Hi there,

Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Please add this code in child theme’s style.css file :

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,300);

.Testimonial {
font-family: font-family: 'Open Sans', sans-serif;;
font-size: 20px;
font-weight: 300;
line-height: 30px;
}

Hope it helps.

[Shan_HBG]

Hi Christoper,

I do have a child theme set up, so that’s no problem.

Can you please help me with these questions:
1 – Where do I put the line of code that Rupok gave me in his reply above? Right now, it’s in my CSS editor. Is that right? The code he gave me is this:

<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>

2 – What do you mean by “template change”? Can’t I just put the CSS to style .Testimonial into my CSS editor, like I do for all the other classes and IDs (and style requirements)?

3 – I see you gave me a different URL to import the fonts that Rupok did. Is the only difference the font weights that it’s importing, or is one format preferred to the other?

Thank you,
Shannon

[Jade]

Hi Shannon,

There are different ways to embed a Google Font on a site. The easier to do it is to use the import code and load the font through the CSS file. You will not need to do the step introduced in response #1016014 if you do what was suggested in response #1016108.

Installing the child theme will make it easier for you to track the codes you’ve added as well. So when you installed the child theme, you can then add the codes suggested previously in the style.css of the child theme.

Let us know if anything is still unclear so we could help you further.

[Author]

Posts