FOUC when using typeface- package

[zvinless]

Description

There is a quick flicker of unstyled content on initial page load when using a font from a typeface package.

I'm guessing it's this issue.

Steps to reproduce

1. Install a typeface package, e.g. yarn add typeface-pattaya
2. Use it as a font in some css
3. Import the font and css in a page
4. Start gatsby dev server
5. Visit the dev server address in Chrome
6. Observe quick flicker of unstyled text before the styled font appears
7. Refresh a bunch and observe the flicker each time

It's also visible in a deployed production build (can be hard to see sometimes but definitely happening):
Demo repo
Demo site

Expected result

No default font should be visible at all before the styled font

Actual result

The default font is visible in place of the styled font for a split second

Environment

  System:
    OS: macOS 10.14
    CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 11.1.0 - /usr/local/bin/node
    Yarn: 1.12.1 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 70.0.3538.77
    Firefox: 63.0.1
    Safari: 12.0
  npmPackages:
    gatsby: ^2.0.33 => 2.0.40 

[LekoArts]

It’s working as expected. Using typefaces doesn’t mean that you won’t have FOUC out of the box. Moreover font-display: swap exactly does that. If you don’t want FOUC you have to preload your fonts.

[zvinless]

@LekoArts thanks for the clarification!