Typography
Review the typography test page.
Managing fonts
Amplify uses Bram Stein's Font Face Observer NPM package to optimise web font loading and prevent a flash of invisible text (FOIT).
A flash of unstyled text (FOUT) is a better user experience than not being able to read something at all. Instead, we want to progressively load web fonts, allowing flashes of unstyled text to happen but minimising the effect.
To achieve this, the default font stack is limited to system fonts - fonts that are installed on a computer, usually included as part of Operating Systems and sometimes bundled with certain programs. If the project requires custom web fonts, we choose system fonts that are similar in appearance to the web font, to minimise FOUT.
Font Face Observer detects when the @font-face files are loaded and adds the fonts-loaded class to the html root element, at which point the web font will be used.