slow network is detected. fallback font will be used while loading

Question

The 'slow network is detected. fallback font will be used while loading` error occurs because of slow network and due to this reasons chrome would display in fallback font using @font-face CSS rule. In this article, we will discuss the ways to get around this issue.

Photo by S Migaj

TABLE OF CONTENTS

1. What is "slow network is detected. fallback font will be used while loading"?
2. How to resolve:
   1. Solution 1:
   2. Solution 2:
   3. Solution 3:
   4. Solution 4:
3. Conclusion

What is “slow network is detected. fallback font will be used while loading”?

It's just a Chrome issue; it's not a "problem" but a Chrome-specific notification/warning.

For illustration, if you load web fonts like Arial because loading web fonts takes time to download and render, the text is displayed in a fallback font for the time being.  During this wait time, the text would be displayed in Arial which may cause inconsistency if some pixel-based positioning was used. Chrome issues a warning in such a case. Hence we can see the slow network is the cause related to using the @font-face CSS rule.

Displaying it throughout console in multiple rows is kind of annoying and can be considered a bug , ChromeDevTools Team is already aware of this. However, the bug appears to be fixed now, and you should no longer experience it after updating your browser. If this is not the case, there are several workarounds available.

How to resolve “slow network is detected. fallback font will be used while loading”?

Solution 1:

Make chrome flag set to Unknown:

chrome://flags/#force-effective-connection-type

Solution 2: 

Update google chrome to latest version, this was already known to ChromeDevTools Team and this seems to be fixed now.

 

Solution 3: 

The other way to get around this annoying message is to implement following settings to hide the message in chrome tools:

Console settings -> User messages only

 

Solution 4: 

To eliminate the issue from the console, simply add font-display to all css font-face definitions.

@font-face {
  font-family: ExampleFont;
  src: url(/path/to/fonts/examplefont.woff) format('woff'),
       url(/path/to/fonts/examplefont.eot) format('eot');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

 

Conclusion:

Please keep in mind that this issue has been now fixed by ChromeDevTools Team and the best remedy is to update your chrome browser.  In this article, we also discussed other work around to get around this problem.

Hope this helps!!