Custom font produce dragging behavior (FOUT, FOIT)

Created by: tsmirnov

Is this a bug report?

Yes

Environment

1. node -v: v6.10.3
2. npm -v: 3.10.10
3. yarn --version (if you use Yarn): 0.27.5
4. npm ls react-scripts (if you haven’t ejected): 1.0.11

Then, specify:

1. Operating system: OSX 10.12.6
2. Browser and version:

• Chrome Version 60.0.3112.101
• Safari Version 10.1.2

Steps to Reproduce

git clone git@github.com:tsmirnov/create-react-app-fout-example.git
yarn start

Try to update page several times. You will see FOUT.

Expected Behavior

I expect page load without dragging (FOUT, FOIT)

Actual Behavior

First page load behave like this:

Reproducible Demo

https://github.com/tsmirnov/create-react-app-fout-example

I added custom font like @gaearon proposed on stackoverflow. However, I get FOUT.

This is happening, because fonts are loaded asyncronusly. Synchronous font loading must solve the problem. I couldn't find anywhere how to do it properly without eject. I can work on PR, to solve that issue. What do you think?