Set font display by swap for improving site performance

[g-viet]

font-display options:

• auto: (default) -> block
• block: FOIT (flash of invisible text) hide & block text until font is fully downloaded
• swap: FOUT (flash of unstyled text) display with system font & swap when font is fully downloaded
• fallback: hide & block in 100ms, then display with fallback text, then swap when font is fully downloaded with short swap period (dont know why yet)
• optional: same with fallback, but hide text then transition to fallback font until custom font is downloaded.

https://css-tricks.com/almanac/properties/f/font-display/ https://web.dev/font-display https://font-display.glitch.me/