Archived topic

Code blocks lose fixed size fonts when upgrading to WordPress 6.0

1 reply · Started by Craig on June 12, 2022

Viewing posts 1–2 of 2

June 12, 2022 at 12:22 am #2250660

I was updating my plugins, etc. on my staging site to check for compatibility of latest updates. Updating all plugins to the latest worked fine and the site still rendered as expected. If I also then update from Wordpress 5.9.3 to 6.0 though, all the code blocks in my posts lose their fixed size font and instead render with the same font as regular paragraphs. I was not able to find anything in the typography settings that would allow me to even see or customise what font is used for code blocks. This appears to be a regression.

I'm using GP Premium 2.1.2

June 12, 2022 at 5:53 am #2250863

Hi there,

thanks for pointing this out, it looks like WP have gone and done it again and have set the <code> to inherit its font, which comes from the <pre> which is inherriting the body.

You can add this CSS to correct the issue:

pre.wp-block-code {
    font: 15px Monaco,Consolas,"Andale Mono","DejaVu Sans Mono",monospace;
}

Or in the Customizer > Typography you can:

1. Add a New Font
1.1 Add Monaco,Consolas,"Andale Mono","DejaVu Sans Mono",monospace to create monospace font stack.

2. Add New Typography
2.1 In the Element list select Custom
2.2 in the Enter custom CSS selector field add: pre.wp-block-code
2.3 Select your font stack and change the font size.

This archived topic is closed to new replies.

Start building better websites today.