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.

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) — TheCuBeMan, Oct 24 '17 at 07:09
ChromeDevTools [tweeted](https://twitter.com/ChromeDevTools/status/923956064826966016) that they're looking into this issue. — Quinn Comendant, Oct 31 '17 at 05:16
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. — Sam Watkins, Dec 04 '17 at 03:13
Possible duplicate of [Showing on console: Slow network is detected. Fallback font will be used while loading](https://stackoverflow.com/questions/42342133/showing-on-console-slow-network-is-detected-fallback-font-will-be-used-while-l) — Neeraj, Dec 08 '17 at 14:08
enable-webfonts-intervention-v2 is not in my chrome flags: 64.0.3282.167 — Michael Terry, Feb 17 '18 at 00:07
This doesn't necessarily mean your network is slow. It appears for many users on their localhost dev machines also e.g. [here](https://groups.google.com/forum/#!topic/psiturk/CJax-rQUHhY) — JD Smith, Apr 02 '18 at 19:58
I can't believe this is still an issue in 2020 in Chrome v81, when serving fonts from localhost. — Adam Reis, Apr 29 '20 at 09:05

Ivan Akulov · Accepted Answer · 2016-11-01T18:08:01.683

175

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

edited Nov 01 '16 at 18:08

answered Nov 01 '16 at 17:38

Ivan Akulov

4,323
5
37
64

153

Can I disable this notification? – Shakeel Ahmed Feb 10 '17 at 07:41
73

Like Acauã Montiel commented above, you can disable this at chrome://flags/#enable-webfonts-intervention-v2 – senornestor Mar 06 '17 at 15:53
13

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? – Ben Aug 16 '17 at 00:28
17

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? – Robin Oct 20 '17 at 07:27
46

I am running from localhost and getting the same error – Vikas Bansal Oct 22 '17 at 07:09
Instead of disabled warnings and errors, Is there any solutions for load fonts from Cache, Retry to load fonts again? – Ashwin Parmar Oct 23 '17 at 15:37
4

Hide these messages by using this regex filter: `/^((?!Fallback font).)*$/`. Unlike other methods, this allows all other enabled message types to display. – Quinn Comendant Oct 24 '17 at 16:34
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? – Quinn Comendant Oct 25 '17 at 10:27
3

@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 – Anton Kastritskiy Nov 01 '17 at 14:18
Disabling the flag doesn't seem to be working on the Chrome 61.0.3163.91 on Ubuntu 16.04. – Muhammad bin Yusrat Nov 01 '17 at 14:52
14

Surely my *local network* is not slow. Sounds like a bug in Chrome. – mpen Nov 02 '17 at 18:00
14

Surely my 100MBit internet is not slow. Sounds like a bug in Chrome. – frumbert Nov 06 '17 at 00:42
13

Surely my local SSD is not slow. Sounds like a bug in Chrome. – Rauli Rajande Nov 11 '17 at 14:54
10

Surely spitting out 200+ alerts for the same 5 fonts is not good usability. Sounds like a bug in chrome. – Adam Youngers Nov 15 '17 at 20:58
1

Here's a bug report that may well be related if you've ever chosen "network throttling": https://bugs.chromium.org/p/chromium/issues/detail?id=778477 Go and vote if you think it's related! – Jason O'Neil Nov 16 '17 at 07:01
Thank you for the explanation and solution. I had same the issue and now I know to to fix. – jack.pop Nov 21 '17 at 03:55
2

It is ugly notification, why I need to know Chrome is replacing something? It disturbs javascript debugging. – Alexander Goncharov Dec 25 '17 at 21:49
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. – Kw Choy Jun 18 '18 at 07:08

Laxmikant Dange · Answer 2 · 2018-01-30T05:59:36.280

110

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.

edited Jan 30 '18 at 05:59

answered Oct 23 '17 at 11:12

Laxmikant Dange

7,606
6
40
65

4

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! – natevw Oct 25 '17 at 20:16
11

Thanks for sharing this workaround - worked for me too! I couldn't find a bug report for this, so I've filed one: https://bugs.chromium.org/p/chromium/issues/detail?id=778477 – NullColaShip Oct 26 '17 at 00:38
3

It did not work for Chrome 61.0.3163.91 on Ubuntu 16.04. – Muhammad bin Yusrat Nov 01 '17 at 14:52
This seems like a safer workaround than changing a flag, but it didn't work on 62.0.3202.89 on MacOS Sierra – jonS90 Nov 10 '17 at 17:45
Worked like a charm. These warnings was bugging me like crazy since I couldn't see any reason for it being slow :) – perry Nov 14 '17 at 03:05
This worked _briefly_ for me with Version 62.0.3202.94 on MacOS Sierra, but quickly reverted :( – Robert Sinton Nov 29 '17 at 22:40
Fixed for me on Chrome Version 63.0.3239.132. Thanks – Zain Zafar Jan 30 '18 at 05:51
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. – terraelise Apr 30 '18 at 18:20
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. – Jacques Aug 07 '18 at 07:31
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. – tony Sep 22 '18 at 05:02

score 79 · Answer 3 · edited Aug 29 '18 at 05:52

79

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.

edited Aug 29 '18 at 05:52

Yogesh

4,546
2
32
41

answered Sep 11 '17 at 14:00

Abdul Waheed

1,060
9
16

3

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. – Karan Desai Sep 11 '17 at 14:29
4

In chrome 63 there isn't such option and this bug appeared to me. – Morteza Dec 20 '17 at 06:37
@MortezaZiaeemehr, It's unfortunate. The whole interface is changed now. And I am not facing the issue now. – Abdul Waheed Dec 20 '17 at 19:56
I have this message in 66.0.3359.139. But there is not option `chrome://flags/#enable-webfonts-intervention-v2` – A.W. May 22 '18 at 07:28
for new chrome versions disable `chrome://flags/#align-font-display-auto-lcp` – Kaveh Karami Oct 05 '20 at 20:30

score 43 · Answer 4 · answered Nov 22 '17 at 10:22

43

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

answered Nov 22 '17 at 10:22

Sikandar Amla

1,415
18
27

1

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. – Sam Watkins Dec 04 '17 at 03:14
1

Turning off AdBlock because of seeing the error and continue watching ADs? Perfect solution /sarcasm – Benji Jul 31 '18 at 14:48
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. – Sikandar Amla Sep 06 '18 at 11:43

score 40 · Answer 5 · answered Aug 16 '18 at 07:48

40

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

answered Aug 16 '18 at 07:48

MrAdib

726
12
21

2

This is the proper way to resolve the issue, set the font-display property to any value that is not 'auto'. https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display#The_font_display_timeline – Peter Sep 03 '18 at 09:34
2

You can fix it globally by adding `* {font-display: block;}` to your css file. – Peter Sep 03 '18 at 09:36
4

`font-display` can only be used in a `@font-face` declaration. So `* {font-display: block;}` will not work as expected. – CedX Jan 07 '19 at 21:39
Thank you! Fixed! Why is it like this? – kodfire Jan 28 '23 at 13:47
How about `font-display: swap;` ? – Fakhamatia Jan 29 '23 at 18:42

score 14 · Answer 6 · answered Oct 23 '17 at 06:12

14

I hide this by set console setting

Console settings -> User messages only

answered Oct 23 '17 at 06:12

Lin Du

88,126
95
281
483

19

@AamirRizwan Watch out. This setting will hide `Error` message too. – Lin Du Oct 25 '17 at 09:23
7

This answer is identical to the one by @David Yew, apart from having a number of undesired side effects – superjos Nov 06 '17 at 22:21

score 10 · Answer 7 · answered Nov 17 '17 at 09:53

10

Goto chrome://flags/#enable-webfonts-intervention-v2 and set it to disabled

It’s due to a bug in Chrome with their latest API for ‘network speed’. Hope it will be fixed in the next version

answered Nov 17 '17 at 09:53

Er Nilay Parekh

569
5
17

score 9 · Answer 8 · answered Sep 14 '17 at 02:48

I have network throttling disabled but started to get this error today on a 75mb/s business connection...

To fix it in my build of Chrome 60.0.3112.90 (Official Build) (64-bit) I opened the DevTools then navigated to the DevTools Settings then ticked 'Log XMLHttpRequests', unticked 'User messages only' and 'Hide network messages'

score 4 · Answer 9 · answered Dec 06 '17 at 20:29

4

I just managed to make the filter regex work: /^((?!Fallback\sfont).)*$/.

Add it to the filter field just above the console and it'll hide all messages containing Fallback font.

You can make it more specific if you want.

answered Dec 06 '17 at 20:29

gfpacheco

2,831
2
33
50

1

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. – Samiullah Khan Mar 16 '18 at 05:02

score 3 · Answer 10 · answered Jan 07 '18 at 18:17

If your developing an app that uses google fonts and want to ensure your users do not see these warnings. A possible solution (detailed here) was to load the fonts locally.

I used this solution for an application which at times has slow internet (or no internet access) but still serves pages, This assumes your app uses Google fonts and updates to these fonts are not critical. Also assume that using ttf fonts are appropriate for your application WC3 TTF Font Browser Support.

Here is how I accomplished locally serving fonts:

Go to https://fonts.google.com/ and do a search for your fonts

Add your fonts

Download them

Place them in site root

Add them to your @font file

score 3 · Answer 11 · answered Aug 13 '18 at 05:46

No, this doesn't mean network is slow.
No, this is not only false warning.

I have this problem on angular web applications after replace link https://fonts.googleapis.com/icon?family=Material+Icons in index.html to integrated version (npm install .... material-icons...). This works, but sometimes web application show that warning.

When warning is shown icons are not rendered for approximately 1 second, so user see badly rendered icons.

I don't have solution yet.

score 2 · Answer 12 · answered Oct 19 '17 at 08:59

2

I also had the same errors with fontawesome's fonts. Then I downloaded the lastest fontawesome's fonts and replace to the old fonts. And the errors are gone.

answered Oct 19 '17 at 08:59

Jamille

99
1
1
11

Could you please describe more ? how did you do this ? – abu abu Oct 23 '17 at 08:53
Hmm.. I think that could solve my problem.. lemme try – Akshay Mar 18 '20 at 10:50
well for me.. wasn't working .. i changed it to just fas fa-plus – Akshay Mar 18 '20 at 10:55

score 2 · Answer 13 · answered Oct 21 '17 at 13:12

2

The easiest way to disable this is uncheck the warnings in the chrome dev tools

Hope this helps.

answered Oct 21 '17 at 13:12

brijmcq

3,354
2
17
34

37

That's a pretty bad idea. – James Gentes Oct 26 '17 at 16:33
1

@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...' – brijmcq Oct 27 '17 at 00:20
15

same you could say just close the browser and you will not see it too. – Nikita Chernykh Oct 29 '17 at 01:53
4

@NikitaChernykh That is not at all the same. It's not. Really. – Muhammad bin Yusrat Nov 01 '17 at 14:49
1

This indeed disable this message, but also all other warnings whom might be useful. – Harden Rahul Nov 02 '17 at 12:14
This answer is identical to the one by @David Yew, apart from having a number of undesired side effects – superjos Nov 06 '17 at 22:21

score 1 · Answer 14 · answered Nov 02 '17 at 09:13

1

you can click 'console settings', and check then box 'Use messages only', after that those messages won't show again.

answered Nov 02 '17 at 09:13

oliver34

330
2
7

This answer is identical to the one by @David Yew, apart from having a number of undesired side effects – superjos Nov 06 '17 at 22:21

score 1 · Answer 15 · answered Dec 13 '17 at 21:48

1

Updating to the latest version of Chrome (63.0.3239.84) via Help -> About fixed it for me.

(actually, I did had to switch to Offline and back to Online in the Network tab of developers tools to make the last errors go away.)

answered Dec 13 '17 at 21:48

splintor

9,924
6
74
89

score 1 · Answer 16 · answered May 28 '18 at 15:54

1

As soon as I disabled the DuckDuckGo Privacy Essentials plugin it disappeared. Bit annoying as the fonts I was serving was from localhost so shouldn't be anything to do with a slow network connection.

answered May 28 '18 at 15:54

John Griffiths

585
7
15

score 0 · Answer 17 · answered Nov 03 '17 at 21:22

0

Right mouse сlick on Chrome Dev. Then select filter. And select source of messages.

answered Nov 03 '17 at 21:22

zato

117
1
4

1

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. – Kunok Nov 11 '17 at 00:35

score 0 · Answer 18 · answered Sep 15 '21 at 13:00

I've noticed if I use the 'woff' version of the font alone, I got this latency warning message. But if I add the 'ttf' version, the warning disapear. As I'am using a local web application, I made a tradeoff as of the size of font file.

font-face {
  font-family: Rakaba;
  src: url(../assets/font/web/Rakaba-Bold.woff) format('woff'),
        url(../assets/font/Rakaba-Bold.ttf) format('ttf');
}

score 0 · Answer 19 · answered Aug 30 '23 at 07:44

If you are using google fonts change who

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Almarai:wght@300&display=swap" rel="stylesheet">

to

<link rel="preconnect" as="style" href="https://fonts.googleapis.com">
<link rel="preconnect" as="style" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Almarai:wght@300&display=swap" rel="stylesheet">

You add the following

as="style"

I hope it helps