question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

fonts with option `download: true` ignore `display` (always are 'block')

See original GitHub issue

Fonts downloaded always seem to be font-display: block; and ignore the display option.

googleFonts: {
    display: 'swap', // 'auto' | 'block' | 'swap' | 'fallback' | 'optional'
    download: true,
    families: {
        Inter: {
            wght: [200, 300, 400, 500, 600, 700],
        },
        Montserrat: {
            wght: [200, 300, 400, 500, 600, 700],
        },
    }
}

Resulting in following css: image

Or is there any rationale for enforcing ‘block’ for downloaded fonts?

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
ricardogobbosouzacommented, Oct 25, 2022

Hi @hartmut-co-uk

Please try v3.0.0-1

0reactions
hartmut-co-ukcommented, Oct 26, 2022

Many thanks, I can confirm everything works as expected with v3.0.0-1. Even without specifying overwriting option changes are detected and applied. 👍

Read more comments on GitHub >

github_iconTop Results From Across the Web

A New Way To Reduce Font Loading Impact: CSS Font ...
With this option, we avoid both FOIT and FOUT by basically only using fonts that have already been downloaded. If the web font...
Read more >
The Best Font Loading Strategies and How to Execute Them
First, we want to load our fonts as usual via @font-face . The font-display: swap property is optional since we're loading fonts via...
Read more >
How to avoid layout shifts caused by web fonts - Simon Hearne
Use display:block and match the fallback font as closely as possible to your web font. Option 1 would need a lot of testing...
Read more >
The Ultimate List of Web-Safe HTML and CSS Fonts
Discover the best web-safe HTML and CSS fonts to use for your website, so you can be sure your text will display properly...
Read more >
Can't find web fonts options in Firefox 62 - Mozilla Support
I am certain I found a clear option the other day to disable web fonts and selected that. I have many sites showing...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found