Custom fonts suddenly not working?

  • Resolved xkahn

    (@xkahn)


    7 months ago

    I have set a custom site font of Lora through Twentig and it’s been working great! But suddenly, the main font reset and I can’t seem to get it fixed. The problem appears to be CSS issues?

    For my site header, for example, I see this rule:

    :where(h1, h2, h3, h4, h5, h6) {
    font-family: var(--wp--preset--font-family--tw-font-1);
    font-weight: 400;
    line-height: 1.4;
}

    Which sounds pretty good. The first font I installed is the font I want to use! But no luck. That’s because no such CSS variable appears to exist! I see these snippets in the CSS:

    body {
    --tw-font-1: 'Lora', serif;
    --tw-font-2: 'Oswald', sans-serif;
}
:root {
    --wp--preset--font-family--tw-font-1: var(--tw-font-1);
/* ... Lots of other variables ... */
}

    It appears that you can’t refer to a body CSS variable in the :root context, but that’s what the code is trying to do.

    • This topic was modified 7 months ago by xkahn. Reason: Post was submitted before I was done? Timeout? Hotkey? Weird

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Support Yann

    (@collet)

    Hi,

    It seems that the issue is related to the Gutenberg plugin, which has changed the location of CSS variables from body to :root (currently WordPress uses body). To fix this issue, you can add the following custom CSS:

    :root {
    --tw-font-1: 'Lora', serif;
    --tw-font-2: 'Oswald', sans-serif;
    --wp--preset--font-family--tw-font-1: var(--tw-font-1);
    --wp--preset--font-family--tw-font-2: var(--tw-font-2);
    }

    However, we have deprecated the Google Fonts feature from our plugin as WordPress now includes a Font Library that allows you to use any Google Font or upload a local font. You can learn more about this through this YouTube video. In your case, it might be best to remove the Twentig fonts and use the Font Library instead.

    Have a nice day,
    Yann

    Thread Starter xkahn

    (@xkahn)

    Thank you Yann! I’ll try out the solution tomorrow. I appreciate your help.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Custom fonts suddenly not working?’ is closed to new replies.