How to Change blockquote Font

  • Resolved dsiebold

    (@dsiebold)


    10 years, 7 months ago

    Hello –

    I’m using Mon Cahier as my blog theme and am quite happy with it. I’m wondering if you can point me in the right direction with regards to how to change the font for blockquote and possibly some of the other styles? I see how the font is defined in the CSS file:

    blockquote {
    margin: 0 1.5em;
    font-family: ‘Reenie Beanie’, cursive;
    font-size: 30px;
    font-size: 3.2rem;
    line-height: 1.8;
    }

    I see this is a Google font. Can I just replace the font name with any Google font? Or is there somewhere else in another file where you point to the Google fonts? I have a development background, so I think if you point me in the right direction, I can get there.

    I’m hosting on Network Solutions, so I don’t think I have the option to create a child theme. But I do have Custom CSS Manager installed, so I’m guessing that’s where I can “override” the font.

    TIA for any assistance!

    Dianne Siebold

Viewing 3 replies - 1 through 3 (of 3 total)

  • go to google.com/fonts

    and get the link to the font you want to use.
    Paste it into header.php

    and only then will it help to change the name of the google font in your css file.

    Theme Author Christine Rondeau

    (@crondeau)

    You can just replace the CSS in your custom CSS manager like so:

    blockquote {
font-family: verdana, arial, sans-serif;
}

    Or if you wanted to use a different google font, just add the @import call. For example –
    https://www.google.com/fonts#UsePlace:use/Collection:Lato

    you would need to use:

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

blockquote {
font-family: 'Lato', sans-serif;
}
    Thread Starter dsiebold

    (@dsiebold)

    Thanks, Christine, that worked. One thing to note for anyone reading this in the future is that I wasn’t able to get the page to use the font until I put it at the very top of the Custom CSS Manager.

    I actually ended up creating a new class called casualtext and made some other changes. It was a challenge to figure out how to handle the space in the font name, but your example plus Google fonts page helped. The CSS changes I made look like this:

    @import “url(https://fonts.googleapis.com/css?family=Architects+Daughter)”;

    casualtext {
    font-family: ‘Architects Daughter’, cursive;
    font-size: 20px;
    font-size: 2.0rem;
    }

    Thanks again for your help!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to Change blockquote Font’ is closed to new replies.