search

wevisdemo / design-systems

WeVis monorepo for design system documentation and cross-framework UI components
https://wevisdemo.github.io/design-systems/
MIT License
16 stars 2 forks source link

Add `font-display: swap;` in `@font-face` #14

Closed rootEnginear closed 1 year ago

rootEnginear commented 1 year ago

I was auditing my webpage and saw that the fonts do not have font-display: swap; property in @font-face.

https://github.com/wevisdemo/design-systems/blob/e6992630b864167eb9fb651d421b682641387673/ui/src/styles/typography.css#L1-L46

As mentioned in https://web.dev/font-display/:

Fonts are often large files that take awhile to load. Some browsers hide text until the font loads, causing a flash of invisible text (FOIT).

So adding font-display: swap; in @font-face can be an improvement for the UX.