I'm using @font-face to embed a font hosted on TypeFront, but my font is not cached by the browser (Firefox 3.6.13 and Epiphany 2.30.2). This is causing a FOUC (Flash of Unstyled Content) on Firefox and MFOMT (Momentary Flash of Missing Text, I just made that one up) on Epiphany every single time the page loads (I'm Ok with a FOUC/MFOMT the first time the the page loads, but not everytime).

I'm trying to avoid having to embed the font in CSS in Base64 if possible and I can't host the font myself.

Why is the font not cached? Are there any alternative free font hosting service that does not have this problem?

Test page:

<!DOCTYPE html>
<html>
    <head>
        <title>TypeFront Cache Test</title>
        <style>
            @font-face {
                font-family: "Journal";
                src: url("http://typefront.com/fonts/825588825.ttf") format("truetype");
            }
            h1 {
                font-family: "Journal";
            }
        </style>
    </head>
    <body>
        <h1>Test text</h1>
    </body>
</html>

If I observe in Firebug, the Net tab shows that the font is served with "200 OK" every time the page loads, instead of "304 Not Modified" or other indications that a cached font are being used (e.g. the browser not even attempting a HTTP request).

HTTP headers:

Response Headers

HTTP/1.1 200 OK
Server: nginx
Date: Sat, 26 Feb 2011 12:57:18 GMT
Content-Type: font/ttf
Transfer-Encoding: chunked
Connection: keep-alive
Vary: Accept-Encoding
Status: 200 OK
Content-Transfer-Encoding: binary
Access-Control-Allow-Origin: *
Content-Disposition: attachment; filename="typefront_735a460727.ttf"
Cache-Control: max-age=31536000
Expires: Sun, 26 Feb 2012 12:57:18 GMT
Content-Encoding: gzip

Request Headers

GET /fonts/825588825.ttf HTTP/1.1
Host: typefront.com
User-Agent: Mozilla/5.0 (X11; U; L
font-face browser-cache
Edit
Report