[Resolved] Roboto Slab Google font used in CSS not displaying

[Matthew]

I want to have the font Roboto Slab for my blog posts because it’s a readable serif font.

If I select this font from the customizer:

Customising > Typography > Body

It looks great.

But because this effects many other site areas where I prefer a sans serif, I set the customizer to just Roboto instead, and try to target the div for the blog area as follows:

.entry-content {
    font-family: 'Roboto Slab';
    color: red;
}

Unfortunately this gives me a generic font I think it’s Time Roman.

If I want to use the Google font like this outside the customizer do I need to load it or similar?

thanks,

[David]

Hi there,

GP won’t enqueue a google font unless it is selected within the Customizer.
Simple solution if you’re not using all of your Headings would be to assign the font to one of them eg. H6

Another alternative is to get the Embed code from the Google Fonts and hook that into the WP_head of your site

[Matthew]

I’m not completely following on your idea about the headings. It is the body text in the customizer rather than the headings I am talking about. H1, H2 etc. will be another font altogether. Could you elaborate, meanwhile I’ll try the second alternative.

thanks,

[David]

Two things happen when you select a font in the customizer.
1. It loads the font and the fonts CSS on the site.
2. It writes some CSS that associates the font with your customizer setting eg.

h6 {
    font-family: 'Roboto Slab';
}

But because the font and its CSS is loaded you can now do this:

.entry-content {
    font-family: 'Roboto Slab';
    color: red;
}

If of course you’re using all of your Headings then embedding the code from Google is the easiest method.

[Author]

Posts