Custom font produce dragging behavior (FOUT, FOIT)

[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 [email protected]: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?

[Timer]

Well this is less than optimal!

We'd like this to not happen, I recall we had an issue open about it once before but I cannot recall the terms to search for it.
IIRC it was a webpack option that needed flipped to include the styles in the main JS bundle instead of loading them async; could you try to dig this up?

I'd be happy to take a PR to fix this, we can discuss the implications of such a change then.

Thanks!

[tsmirnov]

Sure. I've just wanted to verify before PR. I will try to dive deeper and let you know.

[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?

[Timer]

Documentation for this would be appreciated!

See #2415 and #3086 for more discussion.

[gaearon]

Closing as stale.

[harryjubb]

I'm experiencing FOUT with:

import 'typeface-open-sans'
import 'typeface-saira-extra-condensed'

in index.js, and with a third-party component (react-event-timeline) that uses a custom font. I'm using ReactLoadable to code-split my React Router routes but it seems to happen without code splitting too.

Is there any solution to this other than fontfaceobserver? I'll try and see if using that will work with the NPM typefaces packages I'm using.

It would be great for this to be documented in any case. Even if the font is subsequently cached, FOUT on the first load doesn't give a good first impression to users.

[gaearon]

Is this question related to CRA or browsers in general? I’m struggling to understand how this is different from what would happen if you just wrote HTML and CSS by hand. If it’s a generic HTML/CSS issue I don’t think it belongs in our docs.

[harryjubb]

You're right, I had assumed naively that having imported fonts from the typefaces NPM packages had made a difference, it happens regardless so not a CRA issue. Apologies for the confusion, and thanks for your time.

[gaearon]

No worries!