Change default font size and justify all paragraph blocks (or edit multiple)

  • I quite like Gutenberg, but I’ve been waiting for multiple-block editing for a long time. Not having it makes writing in WordPress or even pasting the text an extremely tedious process. I like to set the font size to 16 and I always justify the text with a custom CSS.

    When I have multiple paragraphs selected, the simple process of changing the font size is nonexistent, I have to set everything one by one. Therefore, I’m now wondering if there’s a way to always have a paragraph block default to 16 and have the custom CSS “justify-text” every time, so I can only remove it when I don’t want it. Is there a line of code I can edit to achieve this?

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

  • Following: I would love to know the answer to this as well! I hate that the default size is 14! I, too need size 16 to be default.

    You can add these to your global Custom CSS so the font size is automatic for all paragraphs.

    The first is for your paragraphs and then second two do widget area paragraphs and list items to keep your page fonts consistent:

    p {
    font-size: 16px;
    }

    .widget-area p {
    font-size: 16px;
    }

    ul li {
    font-size: 16px;
    }

    I would suggest 19.2px for all of these though, great size for phones and laptops.

    Thank you!

    Thread Starter olucaszanella

    (@olucaszanella)

    Woah, I didn’t now it would be this simple. Thanks!

    @justmicros Thanks so much for that answer, it saved me a lot of time.

    One more question, you may know the answer off the top of your head…

    I’m trying to work out which display classes are responsible for the back end, in the edit post page. While the custom.css took care of the front end, the back end is now displaying in the old sizing, and so the layout is not consistent – I have to check the front end display and go back and edit layout in the backend.

    I can trawl through the css classes, and try and work it out, but it would be a great help if you know off the top your head. I don’t know enough about how the backend it generated, so I don’t even know if it can be changed.

    Where do you find this Global customizing css in Child Attitude and in Gutenberg?

    Thanks,

    Cupideros

    So simple, thanks for sharing! Works perfectly.

    @catedsmith the backend-styles are inline-styles, which are hard to overrride.
    You could use !important, to make your class win inside the backend.
    Another way to achieve this would be to define your presets in your functions.php like this: 

    add_theme_support(
           'editor-font-sizes', 
           array(
               array(
                   'name'      => __( 'Normal', 'your-theme-text-domain' ),
                   'shortName' => __( 'N', 'your-theme-text-domain' ),
                   'size'      => 14,
                   'slug'      => 'normal'
               ),
               array(
                   'name'      => __( 'Medium', 'your-theme-text-domain' ),
                   'shortName' => __( 'M', 'your-theme-text-domain' ),
                   'size'      => 16,
                   'slug'      => 'medium'
               )
           )
       );

    However, I’m trying to find out a way to solve this more elegantly. A JavaScript should do the trick. I also went away from using pixel sizes for fonts a long time ago… Quite some work still ahead…

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Change default font size and justify all paragraph blocks (or edit multiple)’ is closed to new replies.