Docs

[wbgTHEMECO]

If I want to use another Google font on my X Theme Integrity 5 stack web site that is different from any of the other typography settings thus far, do I do an @import at the top of the custom CSS section, or is there a better way?

As a fake example, what if I wanted my H4 to be Dancing Script?

thanks

[Prasant Rai]

Hello There,

Thanks for writing in!

You can place the following CSS in your Appearance > Customize > Custom > CSS and it will import the font. (You can add your chosen font in the same way)

@import url(https://fonts.googleapis.com/css?family=Dancing+Script|Lato);

You can then use font in stylesheet or inside style attribute such as

h4 {
    font-family: 'Dancing Script', cursive;
}

Let us know how it goes.

Thanks.

[wbgTHEMECO]

I wanted to add some extra font weights for Source Sans Pro using:

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

But when I try to apply font-weight to an element, it seems as though 300 and 400 are not available.

Did I add the @import incorrectly?

[Nabeel A]

Hi again,

Can you please provide the URL of your site so we can take a look?

Thanks!

[wbgTHEMECO]

This reply has been marked as private.

[Rad]

Hi there,

Please provide the URL that has this sample or issue 🙂

I like to see how it’s implemented. For the meantime, please try something like this.

h4 {
  font-family: 'Source Sans Pro';
  font-weight: 300;
}

Cheers!

[wbgTHEMECO]

This reply has been marked as private.

[Joao]

Hi There,

It seems to be working fine on my end,

Please see image attached,

Please clean your browser cache and test it again,

Thanks

Joao

[wbgTHEMECO]

I see the font weight in the CSS code, but it doesn’t render with font weight 200. I’ve emptied cache on both FireFox and Chrome (latest version). If I change the body copy to use the font weight 200 over 400 (regular), it does cascade through the site, but I don’t seem to be able to specify other font weights that render in the browser.

[Friech]

Hi There,

The @import statement does not work on Customizer > Custom CSS anymore. Please move that on top of your child theme’s style.css file.

How to Setup Child Themes.

Hope it helps, Cheers!

[Author]

Posts