Problem: Ensure text remains visible during webfont load:
Fix:
The easiest way to avoid showing invisible text while custom fonts load is to temporarily show a system font. By including font-display: swap
in your @font-face
style, you can avoid FOIT in most modern browsers:
@font-face { font-family: 'Pacifico'; font-style: normal; font-weight: 400; src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2'); font-display: swap; }