Gutenberg: Changing block type removes font

Hey Chris,

Sorry to hear about these errors.

Are you seeing different fonts displaying on the front-end of the site, in the editor, or both?

Hi Ben,

Good question. The font doesn’t change in the editor.
To narrow it down (in case that’s helpful) here’s an example:
– I write some words using a Paragraph block.
– Then, I hover over the top right corner of the block and change the block type to List. – The font remains the same in the editor, but changes to a different font when I preview the changes.

Heading blocks are without error. Quote blocks are fine too.

That’s very helpful. Thank you!

I think another “selector” just needs to be added to the fonts plugin. This should be a pretty quick fix.

If there is an option in the Customizer to affect all fonts everywhere on the site instead of paragraphs and headings in particular, please try that. If you can add a custom selector somewhere try adding “body” or “*” (without quotes). This will tell the plugin to apply the font to every HTML element on the site so list elements aren’t missed.

I remember us doing this to the site a while ago.
We went into Settings>>Google Fonts and added a CSS Selector with a *. So this already exists, with the ‘Force Styles Override’ checkbox checked.
Going into the customizer, I’m using Default Typography to tweak paragraph and headings to different sizes and weights within that font, but yeah, the font in a bulleted list is still completely different.

Here’s a thought: we’ve also gradually built this custom CSS over the years (in the Author customizer):

blockquote {
position: relative;
border: none;
}
blockquote:before {
content: “\201C”;
position: absolute;
top: 0;
left: -15px;
font-family: Revalia;
color: #A9A9A9;
font-size: 70px;
line-height: 45px;
}
table, th, td {
border: 0px;
padding: 5px;
}
.blog .post-content,
.archive .post-content,
.search .post-content {
text-align: left;
border-radius: 35px;
}
.post-meta,
.post-meta a,
.post-meta a:link,
.post-meta a:visited {
color: #A9A9A9;
font-family: Roboto Slab;
font-size: 92%;
}
body {
-webkit-hyphens: none;
-moz-hyphens: none;
hyphens: none;
}
.max-width {
max-width: none;
}
.featured-image img {
border-radius: 15px 15px 0 0;
overflow: visible;
padding-bottom: 0;
height: auto;
line-height: 0;
text-align: center;
}
img, a img {
position: static;
height: auto;
width: auto;
object-fit: contain;
}
a {
position: static;
}
.entry article {
border-radius: 15px;
}
.dropcap
{
float: left;
font-size: 400%;
font-family: Roboto Slab;
line-height: 100%;
}
.entry.has-post-thumbnail article {
border-radius: 0 0 15px 15px;
}
.post-title /*for screens under 700px*/
{
font-size: 25px;
}
@media all and (min-width: 700px) {
.post-title/*for screens over 700px*/
{
font-size: 30px;
}
}

What else can we try?

That’s a shame the plugin still isn’t affecting the lists. Let’s add it manually then with this CSS:

ul, ol {
  font-family: 'Roboto Slab';
}

This should work fine to change the font of the lists since the plugin is already loading the font files for Roboto Slab.

Fixed.

Thank you, sir. I love your work ??

CM

You’re welcome ??