Support » Theme: Author » Gutenberg: Changing block type removes font

  • Resolved chrismacleavy

    (@chrismacleavy)


    Hey Ben.

    Running latest everything (WordPress 5.0.2, Gutenberg 4.7.1, Author 1.36) I’ve been getting used to the new way of writing blog posts using blocks.

    Cut to the chase: when I use the standard ‘Paragraph’ block, my custom font settings look perfect. When I change to anything else (say, a bulleted list block), all my font settings go away, and I’m stuck with a list that is in a completely different font.

    My fonts (for paragraphs and headings) have been tweaked via ‘Customising > Typography > Default Typography’. But there’s no option for bulleted lists or the other kinds of blocks.

    You get the idea. This makes me sad.

    Solutions?

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Theme Author Ben Sibley

    (@bensibley)

    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?

    chrismacleavy

    (@chrismacleavy)

    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.

    Theme Author Ben Sibley

    (@bensibley)

    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.

    chrismacleavy

    (@chrismacleavy)

    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?

    Theme Author Ben Sibley

    (@bensibley)

    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.

    chrismacleavy

    (@chrismacleavy)

    Fixed.

    Thank you, sir. I love your work 🙂

    CM

    Theme Author Ben Sibley

    (@bensibley)

    You’re welcome 🙂

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Gutenberg: Changing block type removes font’ is closed to new replies.