Closed Bug 881315 Opened 11 years ago Closed 11 years ago

Font / CDN Issue on MDN

Categories

(Infrastructure & Operations Graveyard :: WebOps: Other, task)

Product:
Infrastructure & Operations Graveyard
Component:
WebOps: Other
Type:
task
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
RESOLVED FIXED

People

(Reporter: davidwalsh, Assigned: cturra)

Details

We've recently added Font Awesome to MDN, which lives in the "media/font-awesome" directory of the 'kuma' repo.  It appears as though fonts are not served up with proper CORS headers and thus our icons appear as empty blocks:

http://screencast.com/t/dO1Jb8l9

Could we add appropriate CORS headers for this directory?

Thank you!
Les found this which may also be relevant:

https://github.com/netdna/bootstrap-cdn/issues/27
Bumping to major because each document page looks wonky with the odd box in Firefox.  Any ETA ?
Severity: normal → major
i will grab this so it doesn't page on call.

:davidwalsh - to confirm what you're looking for - do you want us to try adding the following apache directives per the github issue?

 <FilesMatch ".(ttf|otf|woff)$">
   Header set Access-Control-Allow-Origin "*"
 </FilesMatch>
Assignee: server-ops-webops → cturra
Severity: major → normal
OS: Mac OS X → All
Hardware: x86 → All
Yep, that appears to be what fixed it for them:

https://github.com/netdna/bootstrap-cdn/blob/master/.htaccess#L41

Hopefully that does the trick for us.
as requested, i have applied these directives to MDN. it's currently on the CDN origin and should be available on the CDN directly within 30 minutes.

$ curl -Ik https://developer-origin.cdn.mozilla.net/media/fonts/League_Gothic-webfont.woff
HTTP/1.1 200 OK
Server: Apache
X-Backend-Server: developer2.webapp.scl3.mozilla.com
vary: Origin, Accept-Encoding
Cache-Control: max-age=1209600
Content-Type: text/plain; charset=UTF-8
Date: Tue, 11 Jun 2013 17:56:08 GMT
Expires: Tue, 25 Jun 2013 17:56:08 GMT
Accept-Ranges: bytes
Access-Control-Allow-Origin: *
ETag: "4c0e25381ccc0"
Last-Modified: Fri, 25 May 2012 20:36:43 GMT
X-Cache-Info: caching
Content-Length: 21176
That works Chris but I think we're missing the font-awesome-specific fonts:

curl -Ik https://developer.cdn.mozilla.net/media/font-awesome/font/fontawesome-webfont.eot?v=3.1.0

HTTP/1.1 200 OK
Server: Apache
X-Backend-Server: developer3.webapp.scl3.mozilla.com
Content-Type: application/vnd.ms-fontobject
Accept-Ranges: bytes
ETag: "4dece1737ba40"
Last-Modified: Mon, 10 Jun 2013 15:04:01 GMT
Content-Length: 29360
X-Cache-Info: cached
Expires: Mon, 17 Jun 2013 18:40:07 GMT
Date: Tue, 11 Jun 2013 19:50:56 GMT
Connection: keep-alive
(In reply to David Walsh :davidwalsh from comment #6)
> That works Chris but I think we're missing the font-awesome-specific fonts:

the FileMatch didn't search for .eot files. i have updated the apache directives to reflect this:

-    <FilesMatch "\.(ttf|otf|woff)$">
+    <FilesMatch "\.(eot|ttf|otf|woff)$">


this is now working in the CDN origin, but will take a bit for caches to clear and get out to the CDNs (non origin).

$ curl -Ik https://developer-origin.cdn.mozilla.net/media/font-awesome/font/fontawesome-webfont.eot
HTTP/1.1 200 OK
Server: Apache
X-Backend-Server: developer3.webapp.scl3.mozilla.com
Cache-Control: max-age=604800
Content-Type: application/vnd.ms-fontobject
Date: Tue, 11 Jun 2013 20:03:20 GMT
Expires: Tue, 18 Jun 2013 20:03:20 GMT
Accept-Ranges: bytes
Access-Control-Allow-Origin: *
ETag: "4dece1737ba40"
Last-Modified: Mon, 10 Jun 2013 15:04:01 GMT
X-Cache-Info: caching
Content-Length: 29360
i changed one thing looking at the FilesMatch directive and the URL you're submitting -- the directive are not expecting the query parameter. making this change appears to have resolved this and the headers are returned correctly (at least in my tests).

  -  <FilesMatch "\.(eot|ttf|otf|woff)$">
  +  <FilesMatch "\.(eot|ttf|otf|woff).*$">


$ curl -Ik https://developer.cdn.mozilla.net/media/font-awesome/font/fontawesome-webfont.eot\?v\=3.1.0
HTTP/1.1 200 OK
Server: Apache
X-Backend-Server: developer3.webapp.scl3.mozilla.com
Content-Type: application/vnd.ms-fontobject
Accept-Ranges: bytes
ETag: "4dece1737ba40"
Last-Modified: Mon, 10 Jun 2013 15:04:01 GMT
Content-Length: 29360
X-Cache-Info: cached
Cache-Control: max-age=476308
Expires: Mon, 17 Jun 2013 16:36:44 GMT
Date: Wed, 12 Jun 2013 04:18:16 GMT
Connection: keep-alive

$ curl -I https://developer.cdn.mozilla.net/media/font-awesome/font/fontawesome-webfont.eot
HTTP/1.1 200 OK
Server: Apache
X-Backend-Server: developer1.webapp.scl3.mozilla.com
Content-Type: application/vnd.ms-fontobject
Accept-Ranges: bytes
Access-Control-Allow-Origin: *
ETag: "4dece1737ba40"
Last-Modified: Mon, 10 Jun 2013 15:04:01 GMT
X-Cache-Info: caching
Content-Length: 29360
Cache-Control: max-age=580703
Expires: Tue, 18 Jun 2013 21:36:43 GMT
Date: Wed, 12 Jun 2013 04:18:20 GMT
Connection: keep-alive
I'm seeing the new header on -origin but not prod yet, so hopefully that will resolve soon:

curl -Ik https://developer.cdn.mozilla.net/media/font-awesome/font/fontawesome-webfont.eot?v=3.1.0
HTTP/1.1 200 OK
Server: Apache
X-Backend-Server: developer3.webapp.scl3.mozilla.com
Content-Type: application/vnd.ms-fontobject
Accept-Ranges: bytes
ETag: "4dece1737ba40"
Last-Modified: Mon, 10 Jun 2013 15:04:01 GMT
Content-Length: 29360
X-Cache-Info: cached
Expires: Mon, 17 Jun 2013 18:40:07 GMT
Date: Wed, 12 Jun 2013 12:17:40 GMT
Connection: keep-alive
Still not up yet;  can we force push the update to production?

curl -Ik https://developer.cdn.mozilla.net/media/font-awesome/font/fontawesome-webfont.ttf?v=3.1.0
HTTP/1.1 200 OK
Server: Apache
X-Backend-Server: developer1.webapp.scl3.mozilla.com
Content-Type: text/plain; charset=UTF-8
ETag: "4dece1737ba40"
Last-Modified: Mon, 10 Jun 2013 15:04:01 GMT
X-Cache-Info: cached
Cache-Control: max-age=433291
Expires: Mon, 17 Jun 2013 16:18:04 GMT
Date: Wed, 12 Jun 2013 15:56:33 GMT
Connection: keep-alive
i found something interesting - the regex we were using support query parameters, but not if they contained '.' i have updated it again with the following, which appears to have resolved this particular use case:

  -  <FilesMatch "\.(eot|ttf|otf|woff).*$">
  +  <FilesMatch "\.(eot|ttf|otf|woff)">


there is no trivial way to completely clear the cache at our CDNs, since we have more than one in play here. i have flushed the cache on our load balancers, to ensure that the next polling cycle of the CDNs will get the latest changes. my tests to origin currently look successful.

$ curl -Ik https://developer-origin.cdn.mozilla.net/media/font-awesome/font/fontawesome-webfont.ttf\?v\=3.1.0
HTTP/1.1 200 OK
Server: Apache
X-Backend-Server: developer1.webapp.scl3.mozilla.com
Vary: Accept-Encoding
Cache-Control: max-age=604800
Content-Type: text/plain; charset=UTF-8
Date: Wed, 12 Jun 2013 16:16:09 GMT
Expires: Wed, 19 Jun 2013 16:16:09 GMT
Accept-Ranges: bytes
Access-Control-Allow-Origin: *
ETag: "4dece1737ba40"
Last-Modified: Mon, 10 Jun 2013 15:04:01 GMT
Content-Length: 64960
Connection: Keep-Alive
X-Cache-Info: cached

... and if i try a "version" that will not be cached by the CDNs, it also looks good:

$ curl -I https://developer.cdn.mozilla.net/media/font-awesome/font/fontawesome-webfont.ttf\?v\=3.1.01
HTTP/1.1 200 OK
Server: Apache
X-Backend-Server: developer1.webapp.scl3.mozilla.com
Content-Type: text/plain; charset=UTF-8
Access-Control-Allow-Origin: *
ETag: "4dece1737ba40"
Last-Modified: Mon, 10 Jun 2013 15:04:01 GMT
X-Cache-Info: caching
Cache-Control: max-age=604795
Expires: Wed, 19 Jun 2013 16:22:58 GMT
Date: Wed, 12 Jun 2013 16:23:03 GMT
Connection: keep-alive
Awesome -- just tried it from -origin and that worked, so once I can pull properly off of the live CDN, I'll resolve this ticket.
Unfortunately still not seeing this in production ...
curl -Ik https://developer.cdn.mozilla.net/media/font-awesome/font/fontawesome-webfont.eot\?v\=3.1.0
HTTP/1.1 200 OK
Server: Apache
X-Backend-Server: developer3.webapp.scl3.mozilla.com
Content-Type: application/vnd.ms-fontobject
Accept-Ranges: bytes
ETag: "4dece1737ba40"
Last-Modified: Mon, 10 Jun 2013 15:04:01 GMT
Content-Length: 29360
X-Cache-Info: cached
Expires: Mon, 17 Jun 2013 18:40:07 GMT
Date: Thu, 13 Jun 2013 13:20:22 GMT
Connection: keep-alive
(In reply to David Walsh :davidwalsh from comment #15)
> Expires: Mon, 17 Jun 2013 18:40:07 GMT

the reason you were not seeing it is because of this header. the context was cached until jun 17th.

as a result i completed the cache purge from akamai, which completed not too long ago. you should now see the Access-Control-Allow-Origin header.

$ curl -I https://developer.cdn.mozilla.net/media/font-awesome/font/fontawesome-webfont.ttf\?v\=3.1.0
HTTP/1.1 200 OK
Server: Apache
X-Backend-Server: developer3.webapp.scl3.mozilla.com
Content-Type: text/plain; charset=UTF-8
Access-Control-Allow-Origin: *
ETag: "4dece1737ba40"
Last-Modified: Mon, 10 Jun 2013 15:04:01 GMT
X-Cache-Info: caching
Cache-Control: max-age=604800
Expires: Thu, 20 Jun 2013 17:44:15 GMT
Date: Thu, 13 Jun 2013 17:44:15 GMT
Connection: keep-alive
Status: NEW → RESOLVED
Closed: 11 years ago
Resolution: --- → FIXED
Never in doubt Chris, thank you!
Component: Server Operations: Web Operations → WebOps: Other
Product: mozilla.org → Infrastructure & Operations
Product: Infrastructure & Operations → Infrastructure & Operations Graveyard
You need to log in before you can comment on or make changes to this bug.