Custom font produce dragging behavior (FOUT, FOIT)

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 [e-mail]: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?

[tsmirnov]

So, I’ve investigated that issue. The reason we get FOIT is that browser loads fonts asyncronusly. User see the page first, browser loads font and then renders the page again.

The most reasonable solution is to use fontfaceobserver and defer rendering before fonts are loaded:

@font-face {
  font-family: 'Myfont';
  font-style: normal;
  font-weight: 400;
  src: url('./Myfont.ttf');
}

import './index.css';
import FontFaceObserver from 'fontfaceobserver';

new FontFaceObserver('Myfont').load().then(() => {
  ReactDOM.render(<App />, document.getElementById('root'));
});

I don’t think we can fix that inside react-scripts. I think, we should just add this recommendation to documentation on how to use custom fonts. Should I make a PR for README.md?

[gaearon]

No worries!