Defining the “Default” Typography in Gutenberg

Hi @krapp91, you can add custom CSS to change the font size of the default to 20px as follows.

The custom variant will have font-size set inline so we can safely ignore that. First identify the class names of the small, normal, large and larger variants. It is has-*-font-size, so to preserve their font-sizes, my CSS selector needs to exclude paragraph tags with these classes. So my custom CSS will be:

p:not([class*="font-size"]) {
  font-size: 20px;
}

Thanks @dhruvkb that seems to work for p tags! How would I also apply it to ul and ol? would it be:

li:not([class*=”font-size”]) {
font-size: 20px;
}

Do you know if there is any way to actually change the styles for the default typography? Your solution works well when the page renders, however within Gutenberg the text still appears to be the wrong font.

In the case of ul/ol, the class is present on the ul/ol tags and not on li so the corresponding CSS would be

ul:not([class*="font-size"]) li,
ol:not([class*="font-size"]) li {
  font-size: 20px;
}

The best way to ensure that the editor and the rendered page display identically would be to create a child theme and override the CSS for p, ul/ol and li tags as desired. But that’s slightly more technical route than the above CSS patch so I’ve attached links to the documentation.

Thanks @dhruvkb that worked for me!

@krapp91 happy to be of help. Please mark the ticket as resolved if your issue has been fixed. Thanks!