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

Home Forums Support Roboto Slab Google font used in CSS not displaying

  • This topic has 3 replies, 2 voices, and was last updated 5 months ago by David.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1293009
    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,

    #1293291
    David
    Staff
    Customer Support

    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

    #1293306
    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,

    #1293359
    David
    Staff
    Customer Support

    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.