Recently I ran into a very weird problem. I tried using the hint under “Optimizing your font requests (Beta)” to improve performance by using the ‘text’ parameter to specify the characters I needed in order to increase performance.
According to Google, “This allows Google to return a font file that’s optimized for your request. In some cases, this can reduce the size of the font file by up to 90%”. (source)
E.g.
<link href="http://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet" type="text/css" />
vs. (note the additional &text=Hello%20World parameter)
<link href="http://fonts.googleapis.com/css?family=Inconsolata&text=Hello%20World" rel="stylesheet" type="text/css" />
After a bit of troubleshooting, I realized that whenever I added the ‘text’ parameter, I would get the error:
Font from origin ‘http://fonts.gstatic.com’ has been blocked from loading by Cross-Origin Resource Sharing policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://example.localhost’ is therefore not allowed access. The response had HTTP status code 400.
However, if I remove the ‘text’ parameter, the error goes away. There should definitely be a CORS header on the response from fonts.gstatic.com, but somewhere along the line it doesn’t get pushed forward.
So it seems this feature really is still in beta. Removing the ‘text’ parameter fixed the problem. Hope this helps someone else.
Be First to Comment