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)

Answer 1

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.