Olsen Theme: How to change font

  • Author
  • #3004708

    Hi, I’d like to know how to change the font on the heading and body of text on my wordpress site to the same one; Playfair display.

    Is CSS a possible route for this?

    The blog I need help with is convoswithchi.com.


    Hi there, I see you have a CSS rule to change the base text to Playfair Display, but we need to make a slight change in the CSS selector to the following.

    .wf-active body {
     font-family:‘Playfair Display’, sans-serif;

    I see you have Headings set to Playfair in the customizer already.


    Thanks for the speedy response,

    Ive just tried adding the CSS however It changes the font to a completely different one. Not Playfair Display and Im unsure why this would be. Is there another location I should be adding this to?


    Hmmm, that is strange. It is using “sans-serif”, the second font in the font stack instead of Playfair. Playfair Display is not really designed to be used in body copy, but is designed for things like titles and headings. It may be the software is detecting that and going with the second choice. We can force the issue by changing the font stack to just include Playfair, like this.

    .wf-active body {
     font-family:‘Playfair Display’;


    So I tried a few combinations of the code, 1st time using the one last one you provided, then both at the same time and found that while it worked like this it didn’t “stick”… so every time I would refresh the page it would revert back to the original code.

    I thought about what you said regarding the page trying to access the second font (on the original code you supplied) and tried using this instead
    .wf-active body {
    font-family:‘Playfair Display’, Playfair Display;

    Which seems to be working…

    Is this a good idea?

    Also the first time I attempted to make a change to the code- (hadnt made changes to WP for several hours) this message came up which said… “Cheating huh’ sorry you can’t make changes to this site-?? it also had the wordpress banner on top but just seemed really odd…


    If that works, then use it. I’m not sure what is going on with it not working unless you add the font family twice. This is a strange one.


    I’m not sure what is going on with it not working unless you add the font family twice.

    @thesacredpath – is the problem caused by the curly quotes around Playfair Display in the CSS you posted?


    Oh shoot, @garysixtyeight, you are likely onto something and thanks for pointing that out. I actually copied that out of either the original CSS (probably not), or out of some custom CSS on the site.

    @convoswithchi, replace your custom CSS with this and see if this works.

    .wf-active body {
     font-family:'Playfair Display', sans-serif;


    Thank you, I will give this a go


    You are welcome and let us know if that works.

The topic ‘Olsen Theme: How to change font’ is closed to new replies.