Chrome fonts always pending

Question

I'm having this weird thing that suddenly the fonts of my application are always on 'pending' even when I remove the fonts from the location.

The biggest issue on this is that I use browserSync, so when I change something the page gets reloaded, but because of the font requests that are still active. It won't load it in before those are finished. So I get an empty page

On Firefox / IE, this isn't an issue.

I tried recycling my IIS, restarting my PC, switch application pools, ... all with no result

Chrome: Version 53.0.2767.5 dev-m (64-bit)

Found someone having some issue with adblocker, you could [try](http://stackoverflow.com/questions/5585918/what-does-pending-mean-for-request-in-chrome-developer-window) if that works. — Randy, Jun 22 '16 at 08:20
Same issue here. We have about 30 fonts that are pending, mostly from Google but many from our own CDN. This is only occurring in Chrome Canary (53.0.2782.0 canary), not in standard Chrome or other browsers. We've tried disabling Ad blockers and that doesn't help. Happens in canary incognito as well. Also worth mentioning, we discovered this because some users had issues with this on their current (non-canary) chrome browsers and it prevented the page from loading. Clearing cache and cookies solved it, but it's still an issue in Canary. — NilsyNils, Jun 28 '16 at 16:42
Might be a cache issue. When using the Developer Tools in Chrome, go to the Network tab and select "Disable cache". — Rick, Jun 24 '17 at 17:34

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

I dont know what is wrong in your case, but, i will show how i do to load fonts, hope this helps.

First: have the font you want to use, if you dont have one, the google fonts are a awesome place to look and download some fonts.

Second: go to here is the website (fontsquirrel) and go to generator, mark the option expert to make some alterations in your download, mark the two options: EOT Lite and SVG in the section: Font Formats:, go down, and mark the option Agreement:, then download your font.

Third: after wait some seconds, and when your font is ready to go, extract in one file the content, it will come like this:

Specimen_files
Stylesheet.css
Generator-config
Font-you-download.eot
Font-you-download.woff
Font-you-download.woff2
A demonstration of the font you downloaded in HTML
Font-you-download.svg
The font-you-download (the one you install in your device)

Now, delete this files, if you want,

generator-config
specimen_files
a demonstration of the font you downloaded in HTML

Five: copy and paste the file that contains all the files you have downloaded in font-squirrel in your project,

In the Stylesheet.css it will look more or less like this:

@font-face {
    font-family: 'open_sanslight_italic';
    src: url('opensans-lightitalic-webfont.eot');
    src: url('opensans-lightitalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('opensans-lightitalic-webfont.woff2') format('woff2'),
         url('opensans-lightitalic-webfont.woff') format('woff'),
         url('opensans-lightitalic-webfont.svg#open_sanslight_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}

Six: Here the map of the files of my archive of example to more understanding :

-Project-2017
----- Fonts
---------- The file what have all files (The one you took some files from)
----- Imgs
---------- All images of the website
----- Js
---------- js.js
----- Styles
---------- Styles.css
-----Index.html

Seven: Put your location of your font files, like this code below following the map above:

@font-face {
font-family: 'open_sanslight_italic';
src: url('../fonts/opensans-light/opensans-lightitalic-webfont.eot');
src: url('../fonts/opensans-light/opensans-lightitalic-webfont.eot?#iefix') format('embedded-opentype'),
     url('../fonts/opensans-light/opensans-lightitalic-webfont.woff2') format('woff2'),
     url('../fonts/opensans-light/opensans-lightitalic-webfont.woff') format('woff'),
     url('../fonts/opensans-light/opensans-lightitalic-webfont.svg#open_sanslight_italic') format('svg');
font-weight: normal;
font-style: normal;

}

Now the explication of the urls:

({"../"} to go to this estruture:),

----- Fonts
---------- The file what have all files (The one you took some files from)
----- Imgs
---------- All images of the website
----- Js
---------- js.js
----- Styles
---------- Styles.css
-----Index.html

({"fonts"} to go where your font files ),

({"opensans-light"} it is the file i have downloaded for the example, inside it have all files you have downloaded in font-squirrel);

At this moment you have the font installed, but then you asked me: How i put her in HTML ?, you have 2 options to use the font, one is copying the font-familly row like this in my example:

font-family: 'open_sanslight_italic';

And setting in the class like:

.opn-itc{
 font-family: 'open_sanslight_italic';
}

**Or**

body{
 font-family: 'open_sanslight_italic';
}

After all this tutorial you have success in choose your font, modify the font, put in your css and called like a class to put in anywhere.

Sorry if this tutorial got a little long or complex, at first I also thought that the dog sucking manga, but just repeat this process several times and you start to do without thinking, in the automatic mode, if you need help call me.

Chrome fonts always pending

1 Answers1