Menu
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; Linux i686 (x86_64); en-US; rv:1.9.2.13) Gecko/20101203 Firefox/3.6.13
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
Origin: null
511
UPDATE Nov-2016: The Coral content distribution network, described below, is no longer in operation.
This is a rather generic "solution". There is a production service, operating since years, open to the public (though check their terms for commercial use, I don't know if it fits). It is a US federally funded research project in a content distribution network.
It is called Coral and works by appending .nyud.net to any URL, for example
http://www.example.com/static/MyFont.ttf
becomes
http://www.example.com.nyud.net/static/MyFont.ttf.
There is nothing else to do. On the first request, the Coral servers fetch and cache the file (expect some delay), and then they serve it without checking again (they only check infrequently for new versions).
It is using an advanced DNS extension, DNAME records, so it might not work with very old operating systems or DNS resolvers, though anything reasonably recent is known to work. This way, requests are routed to a geographically close server.
83
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
