CODEWITHSUNDEEP
csswebfonts
Benedikt
Benedikt

Reputation: 974

Why are my web fonts files not being loaded?

I am wondering, why only two of my six web font files are being loaded.

This is my CSS:

@font-face {
  font-family: 'Constructa';
  src: url(/content/themes/blog-theme/fonts/Constructa-Regular.woff);
}
@font-face {
  font-family: 'TranSerif HdlUltrabold';
  src: url(/content/themes/blog-theme/fonts/TranSerif-HdlUltrabold.woff);
}
@font-face {
  font-family: 'AvantGarde Bold';
  src: url(/content/themes/blog-theme/fonts/AvantGarBol.woff);
}
@font-face {
  font-family: 'ChronicleTextG3';
  src: url(/content/themes/blog-theme/fonts/ChronicleTextG3.woff);
}
@font-face {
  font-family: 'Antenna Bold';
  src: url(/content/themes/blog-theme/fonts/Antenna-Bold.otf);
}
@font-face {
  font-family: 'Antenna Thin';
  src: url(/content/themes/blog-theme/fonts/Antenna-Thin.otf);
}

The "Network" tab in Google Chrome does not show any 404s. Neither does it show my font files being loaded.

Network traffic in chrome

I experience the same issue in other browsers, so I would suggest, that it is my code that is causing troubles.

Any suggestions?

Best regards, Benedikt

P.S.: Of course, I did check the availability of the other web fonts. They are existing on the given paths. Just not loaded.

Upvotes: 2

Views: 2091

Answers (1)

nils
nils

Reputation: 27225

Just to give an answer as to why this is happening. In the CSS Fonts Module Specification (Section 4.8 Font loading guidelines) it says:

The @font-face rule is designed to allow lazy loading of font resources that are only downloaded when used within a document.

So since you specified all the fonts via @font-face but only used two of them in your subsequent CSS, browsers such as Chrome and Firefox wont download them (which saves a lot of bandwidth, especially on mobile devices).

Upvotes: 9

Related Questions