[Resolved] Gutenberg Code Block – font size not changing

Home Forums Support [Resolved] Gutenberg Code Block – font size not changing

Home Forums Support Gutenberg Code Block – font size not changing

  • This topic has 7 replies, 2 voices, and was last updated 4 months ago by Fernando.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #2157361

    I’m using the Code Block to show some code snippet in a post. But the font size selection from the built in right hand menu ‘Typography’ section seem to be overwritten by GeneratePress. I believe the theme file GeneratePress: all.css (assets/css/all.css) line 800:

    var {
    font: 15px Monaco, Consolas, “Andale Mono”, “DejaVu Sans Mono”, monospace;

    Is superseding the built in WordPress code block size. I know I could write my own css to overwrite your css but I want individual control of it from the wordpress menu for different posts.

    Am I missing something / do you have any advice?


    Customer Support

    Hi Trevor,

    Alternatively, to control the font size of all Code Blocks globally, you may set a Typography in Appearance > Customize > Typography as such:



    Kindly let us know if this works. πŸ™‚


    The Typography options in Customize don’t look like that image.

    Additionally as I said in my first post I don’t want to globally control the Code Block font. I can change the default size with css easily enough but I want the built in WordPress block controls to override the defaults as anyone would expect it to function.

    Customer Support

    I see.

    With regards to the Dynamic Typography options in the Customizer here is an article which may assist: https://docs.generatepress.com/article/switching-to-dynamic-typography/

    With regards to the WP font size settings for the Code Block, spoke with Tom and as of now, to make it work, you would need to add a custom CSS code.

    For instance:

    .has-x-large-font-size code {
        font-size: var(--wp--preset--font-size--x-large) !important;

    Also see: https://share.getcloudapp.com/nOuRWql8

    Hope this clarifies. Thank you for understanding. πŸ™‚


    Hi Fernando,

    You linked this thread to itself. What article did you mean?

    Customer Support

    Sorry about that.

    Fixed the link on my previous reply. Kindly let us know how it goes. πŸ™‚


    Thanks Fernando, I will look into updating to the dynamic typography.

    In case it helps someone else the solution I ended up using was adding this to the Custom CSS:

    /*Override GeneratePress code block font size*/
    code{font-size: inherit;}

    That gives the font size control back to the default Gutenberg code block controls.

    Customer Support

    Great! Thank you for sharing Trevor! πŸ™‚

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