CODEWITHSUNDEEP
fonts
Pieter Van Neste
Pieter Van Neste

Reputation: 21

Fonts google api: Failed to decode downloaded font

For a project I use the Webfontloader from Typekit to load my google fonts. I load the fonts from this usually syntax:

{
    "google": {
        "families": [
            "Alegreya Sans:400,400italic,700,700italic",
            "Arvo:400,400italic,700,700italic",
            "Averia Libre:400,400italic,700,700italic",
            "Averia Sans Libre:400,400italic,700,700italic",
            "Josefin Sans:400,400italic,700,700italic",
            "Josefin Slab:400,400italic,700,700italic",
            "Karla:400,400italic,700,700italic",
            "Lobster Two:400,400italic,700,700italic",
            "Lora:400,400italic,700,700italic",
            "Montserrat Alternates:400,400italic,700,700italic",
            "Playfair Display SC:400,400italic,700,700italic",
            "Raleway:700italic,700,400italic,400:latin",
            "Roboto Condensed:400,400italic,700,700italic",
            "Roboto:400,400italic,700,700italic",
            "Rubik:400,400italic,700,700italic",
            "Sansita:400,400italic,700,700italic",
            "Ubuntu:700italic,700,400italic,400"
        ]
    }
}

The result is most of the times correct, but sometimes wrong. I get sometimes a load error like this on a random font (not always the same font).

It's normal that the decoding doesn't work because this url: https://fonts.gstatic.com/stats/Josefin+Slab/normal/400 gaves a 204 (no content) response. When I looked in to issue I discovered that the url came from the css response from google's api url:

https://fonts.googleapis.com/css?family=Alegreya+Sans:400,400italic,700,700italic%7CArvo:400,400italic,700,700italic%7CAveria+Libre:400,400italic,700,700italic%7CAveria+Sans+Libre:400,400italic,700,700italic%7CJosefin+Sans:400,400italic,700,700italic%7CJosefin+Slab:400,400italic,700,700italic%7CKarla:400,400italic,700,700italic%7CLobster+Two:400,400italic,700,700italic%7CLora:400,400italic,700,700italic%7CMontserrat+Alternates:400,400italic,700,700italic%7CPlayfair+Display+SC:400,400italic,700,700italic%7CRaleway:700italic,700,400italic,400%7CRoboto+Condensed:400,400italic,700,700italic%7CRoboto:400,400italic,700,700italic%7CRubik:400,400italic,700,700italic%7CSansita:400,400italic,700,700italic%7CUbuntu:700italic,700,400italic,400&subset=latin

Wrong part of the response: 

/* sampled usage */
@font-face {
  font-family: 'Averia Libre';
  font-style: italic;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/stats/Averia+Libre/italic/400);
  unicode-range: U+20;
}

Every time when there is a /* sampled usage */ comment, the url is wrong. I made a integrationtest that calls the url multiple times. There you can see that the result multiple times is wrong.

Postman collection:
https://www.getpostman.com/collections/923fee0336dfbf961be9

Result:
http://i.gyazo.com/80effb10e70fe6c41ee4df78439a1e50.mp4

Can somebody help me with this issue? I already tried without the font styles and less fonts, but the problem still popups.

Upvotes: 2

Views: 3467

Answers (2)

navels
navels

Reputation: 80

We have been experiencing the exact same during our automated browser testing. Infrequently, but with as many page loads that occur during these tests it is enough to be noticeable.

However, using Web Font Downloader seems to do the trick!

Upvotes: 0

Moshe
Moshe

Reputation: 41

I had to manually copy all of the imports and paste them in my own file and comment out the sampled usage piece, how annoying...

Upvotes: 0

Related Questions