Why does this "Slow network detected..." log appear in Chrome?

Question

I noticed this info log began to appear in Google Chrome Dev (Version 55.0.2883.18 dev) and I can't imagine why.

Slow network is detected. Fallback font will be used while loading: http://font-path.extension`

It appears on all websites that use font-face, even on local pages and Chrome extensions.

Solution 1

This means the network is slow, and Chrome is replacing a web font (loaded with a @font-face rule) with a local fallback.

By default, the text rendered with a web font is invisible until the font is downloaded (“flash of invisible text”). With this change, the user on a slow network could start reading right when the content is loaded instead of looking into the empty page for several seconds.

• Related Chrome issue: https://bugs.chromium.org/p/chromium/issues/detail?id=578029. (A change enabling this behavior for 3G connections landed in September; this should be the reason you got the message.)
• Related source code: https://chromium.googlesource.com/chromium/src/third_party/+/master/WebKit/Source/core/css/RemoteFontFaceSource.cpp#74

Solution 2

I faced same issue for chrome build 61.0.3163.100 on MacOs Sierra with localhost as server. Chrome started logging this message when I changed network speed configuration to 3G fast/ 3G slow and again back to Online.

Fix: When I tried selecting Offline mode and again Online mode, the logging issue disappeared. (This fix may no work on some devices or versions)

Update on 30th Jan 2018

I updated google chrome to Version 64.0.3282.119 (Official Build) (64-bit), it seems this bug is fixed now.

Solution 3

EDIT: This is not working with latest version of 63.0+

I was able to disable it using help from one of above comments, go to

chrome://flags/#enable-webfonts-intervention-v2

The trick is to also disable the "Trigger User Agent Intervention for WebFonts loading always" option just below that as well.

Solution 4

In my case, it was AdBlock Plus extension for Google chrome. Turned it off and it worked perfectly.

Solution 5

if you can access to css of this extension, simply add font-display:block; on font-face definition or send feedback to developer of this extension:)

@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;
}

View more solutions

Comments

[Abderrahmane TAHRI JOUTI]

This started appearing for me today to

[Acauã Montiel]

I disabled this option and the logs no longer appear, but I still don't know what that means. chrome://flags/#enable-webfonts-intervention-v2

[kenberkeley]

@AcauãMontiel time saver

[danwild]

@AcauãMontiel lol +1 for honesty

[TheCuBeMan]

Disabling this message in the log doesn't resolve the slowness issue... What can be the reason for slowness if this is not a portable device, but a desktop PC with a permanent wired connetion to the internet??... (this is while all other internet-related software and programs are working fine, of course)

[Quinn Comendant]

ChromeDevTools tweeted that they're looking into this issue.

[Jason Tolliver]

Just have to say @AcauãMontiel you're comment is still a life saver

[Sam Watkins]

In my case my page is not using google web fonts. The "WOT: Web Of Trust" extension is injecting code to load fonts. You can check which extension is doing it, in the developer tools network tab. Find the offending font request and click in the "initiator" column to see source. Then look up the tree on the left to see what extension the file is in.

[Neeraj]

Possible duplicate of Showing on console: Slow network is detected. Fallback font will be used while loading

[Michael Terry]

enable-webfonts-intervention-v2 is not in my chrome flags: 64.0.3282.167

[JD Smith]

This doesn't necessarily mean your network is slow. It appears for many users on their localhost dev machines also e.g. here

[Adam Reis]

I can't believe this is still an issue in 2020 in Chrome v81, when serving fonts from localhost.

[Shakeel Ahmed]

Can I disable this notification?

[senornestor]

Like Acauã Montiel commented above, you can disable this at chrome://flags/#enable-webfonts-intervention-v2

[Ben]

I think the notification is kinda useful for development. The issue is when Chrome shows it for every single extensions installed in the same console log, so much noise. What's the point of showing it for extensions?

[Karan Desai]

This actually does not answer OP's question of "Why that log came in Console in the first place". You can edit your answer if you know that.

[Robin]

any reason this message stil appears even though the font is loaded from memory/disk cache? Could this mean there's a delay in loading the font from cache as well?

[Vikas Bansal]

I am running from localhost and getting the same error

[abu abu]

Could you please describe more ? how did you do this ?

[Ashwin Parmar]

Instead of disabled warnings and errors, Is there any solutions for load fonts from Cache, Retry to load fonts again?

[Quinn Comendant]

Hide these messages by using this regex filter: /^((?!Fallback font).)*$/. Unlike other methods, this allows all other enabled message types to display.

[slideshowp2]

@AamirRizwan Watch out. This setting will hide Error message too.

[Quinn Comendant]

Hmmm, that regex doesn't seem to work as expected: it hides some error messages too. Anyone able to use a negative lookahead regex to hide the "Fallback font" errors, while showing others?

[natevw]

Checking/unchecking the Offline mode toggle in the Network tab worked for me too — the fonts were being served from a dev server on localhost, so I didn't think it was really a "slow network" issue ;-) In my case I hadn't even been messing with other speed configurations or anything…weird. Thanks for finding and sharing this workaround!

[NullColaShip]

Thanks for sharing this workaround - worked for me too! I couldn't find a bug report for this, so I've filed one: bugs.chromium.org/p/chromium/issues/detail?id=778477

[James Gentes]

That's a pretty bad idea.

[brijmcq]

@JamesGentes you are correct and this is not a permanent solution. Sometimes it is better to just turn it off if you are debugging and don't want to see hundreds of 'Slow network is detected...'

[Nikita Chernykh]

same you could say just close the browser and you will not see it too.

[AntK]

@Robin if you're reloading page with devtools open the 'disable cache' option is enabled by default, if you go to network tab and uncheck it and reload the page the logs will not appear

[Muhammad bin Yusrat]

@NikitaChernykh That is not at all the same. It's not. Really.

[Muhammad bin Yusrat]

Disabling the flag doesn't seem to be working on the Chrome 61.0.3163.91 on Ubuntu 16.04.

[Muhammad bin Yusrat]

It did not work for Chrome 61.0.3163.91 on Ubuntu 16.04.

[Harden Rahul]

This indeed disable this message, but also all other warnings whom might be useful.

[mpen]

Surely my local network is not slow. Sounds like a bug in Chrome.

[frumbert]

Surely my 100MBit internet is not slow. Sounds like a bug in Chrome.

[superjos]

This answer is identical to the one by @David Yew, apart from having a number of undesired side effects

[superjos]

This answer is identical to the one by @David Yew, apart from having a number of undesired side effects

[superjos]

This answer is identical to the one by @David Yew, apart from having a number of undesired side effects

[jonS90]

This seems like a safer workaround than changing a flag, but it didn't work on 62.0.3202.89 on MacOS Sierra

[Kunok]

Still not good solution compared to disabling that specific message inside chrome settings. For example I am using SSR and source of this alert may be same as from actual application, therefore it also disables my desired logs. Other than that, there might be many sources and you would need to filter many of them.

[Rauli Rajande]

Surely my local SSD is not slow. Sounds like a bug in Chrome.

[perry]

Worked like a charm. These warnings was bugging me like crazy since I couldn't see any reason for it being slow :)

[Adam Youngers]

Surely spitting out 200+ alerts for the same 5 fonts is not good usability. Sounds like a bug in chrome.

[Jason O'Neil]

Here's a bug report that may well be related if you've ever chosen "network throttling": bugs.chromium.org/p/chromium/issues/detail?id=778477 Go and vote if you think it's related!

[jack.pop]

Thank you for the explanation and solution. I had same the issue and now I know to to fix.

[Robert Sinton]

This worked briefly for me with Version 62.0.3202.94 on MacOS Sierra, but quickly reverted :(

[Sam Watkins]

In my case it was "WOT: Web of Trust" extension. I don't see why the thing needs to load its own special fonts, it should just use whatever default font.

[Morteza]

In chrome 63 there isn't such option and this bug appeared to me.

[Abdul Waheed]

@MortezaZiaeemehr, It's unfortunate. The whole interface is changed now. And I am not facing the issue now.

[Alexander Goncharov]

It is ugly notification, why I need to know Chrome is replacing something? It disturbs javascript debugging.

[Zain Zafar]

Fixed for me on Chrome Version 63.0.3239.132. Thanks

[Samiullah Khan]

I think I am gonna go with this solution. I think going selecting certain messages like "User Messages Only" is not recommended at all. One can easily miss the errors or warning thrown by your web app.

[TerraElise]

This still worked for me (with a refresh between check / uncheck the offline within Network tab) in Chrome version 66.0.3359.139 on Windows 7.

[A.W.]

I have this message in 66.0.3359.139. But there is not option chrome://flags/#enable-webfonts-intervention-v2

[Kw Choy]

I also got this running on localhost and the font file that caused the error is only 43kB in size. Surely it won't be slow in any situation. There is another font file I used at the same font folder that is 374kB and it never caused any error. I'm sure it's a bug in Chrome.

[Benji]

Turning off AdBlock because of seeing the error and continue watching ADs? Perfect solution /sarcasm

[Jacques]

Worked for me on version 68.0.3440.84, but only intermittently. When working in Angular and on every save/recompile of files the problem comes back when the page reloads.

[Peter]

This is the proper way to resolve the issue, set the font-display property to any value that is not 'auto'. developer.mozilla.org/en-US/docs/Web/CSS/@font-face/…

[Peter]

You can fix it globally by adding * {font-display: block;} to your css file.

[Sikandar Amla]

This behavior can also be because of poorly written JavaScript/jQuery code. If you have a function called but not declared, it can happen. If you are copying/pasting your code and removing some of the functions not used, be extra careful.

[tony]

Using Chrome 68.0.3440.106 I noticed the Audit tab of dev tools had Simulated 3G toggled. I don't remember turning the setting on but going back to No Throttling fixed the issue.

[CedX]

font-display can only be used in a @font-face declaration. So * {font-display: block;} will not work as expected.

[Akshay]

Hmm.. I think that could solve my problem.. lemme try

[Akshay]

well for me.. <i class="fas fa-plus-square" ></i> wasn't working .. i changed it to just fas fa-plus

[Kaveh Karami]

for new chrome versions disable chrome://flags/#align-font-display-auto-lcp