Firefox-Specific Problem with Google Font API

We started using the Google Font API recently to present our websites with type faces that are a bit more interesting that the standard Arial, Georgia, Verdana, and Times New Roman font available in all browsers. It’s very easy to use and the performance overhead is relatively small. Plus, the font choices are very high qualify and free.

However, for some reason, it wasn’t working in Firefox–even though it’s documented to be supported in version 3.5 and above. The odd thing was that the fonts rendered correctly from Google’s website, but not our own. We created the following simple test page to test in a variety of circumstances, and found that the problem only existed within our corporate network:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Font-Face Test</title>
    <link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css" />
    <style type="text/css">
        h1 {font-family:"Lobster", Arial, serif; font-size:200px;letter-spacing:-1px;line-height:1;margin:0;-webkit-text-stroke:1px transparent}
    </style>
</head>
<body>
    <h1>
        Testing 1, 2, 3.</h1>
</body>
</html>

After a little investigation, we found the culprit. Our firewall is configured to automatically strip any HTTP headers that are not in a recognized list. For Google Font API to work in Firefox it is important that the Access-Control-Allow-Origin header be present. After adding this to our allowed headers list, the problem was solved.

Leave a Reply

Your email address will not be published. Required fields are marked *