CODEWITHSUNDEEP
google-chromefont-face
Acauã Montiel
Acauã Montiel

Reputation: 3325

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

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.

Print screen of a local website

Upvotes: 321

Views: 286617

Answers (19)

Mustafa Max
Mustafa Max

Reputation: 69

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

Upvotes: 0

ASM
ASM

Reputation: 103

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

Upvotes: 0

Abdul Waheed
Abdul Waheed

Reputation: 1060

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.

enter image description here

Upvotes: 79

MrAdib
MrAdib

Reputation: 806

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

Upvotes: 42

bmi
bmi

Reputation: 811

  1. No, this doesn't mean network is slow.
  2. 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.

Upvotes: 3

John Griffiths
John Griffiths

Reputation: 585

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.

Upvotes: 1

Laxmikant Dange
Laxmikant Dange

Reputation: 7688

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.

Upvotes: 109

Fergus
Fergus

Reputation: 2992

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

search

Add your fonts

enter image description here

Download them

enter image description here

Place them in site root

enter image description here

Add them to your @font file

enter image description here

Upvotes: 3

splintor
splintor

Reputation: 10154

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.)

Upvotes: 1

gfpacheco
gfpacheco

Reputation: 3225

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.

Upvotes: 4

Sikandar Amla
Sikandar Amla

Reputation: 1475

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

Upvotes: 45

Er Nilay Parekh
Er Nilay Parekh

Reputation: 587

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

Upvotes: 9

zato
zato

Reputation: 117

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

Upvotes: 0

oliver34
oliver34

Reputation: 330

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

enter image description here

Upvotes: 1

Lin Du
Lin Du

Reputation: 102547

I hide this by set console setting

Console settings -> User messages only

Upvotes: 13

brijmcq
brijmcq

Reputation: 3418

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

enter image description here

Hope this helps.

Upvotes: 1

Jamille
Jamille

Reputation: 99

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.

Upvotes: 2

brandito
brandito

Reputation: 704

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'

Upvotes: 9

Ivan Akulov
Ivan Akulov

Reputation: 4323

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.

Upvotes: 176

Related Questions