Reputation: 1965
My project has a problem to load a custom font via font-face. This is happening only when I use my subdomain (static.domain.com) for static resources.
The HTTP server response is 200/OK
, but the request in Chrome DevTools is red and the size as 0 bytes, but I can not understand why.
My css for loading the fonts:
@font-face {
font-family: 'flexslider-icon';
src:url('fonts/flexslider-icon.eot');
src:url('fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'),
url('fonts/flexslider-icon.woff') format('woff'),
url('fonts/flexslider-icon.ttf') format('truetype'),
url('fonts/flexslider-icon.svg#flexslider-icon') format('svg');
font-weight: normal;
font-style: normal;
}
Headers of the HTTP request without subdomain:
Remote Address:server-ip:80
Request URL:http://domain.com/resources/vendor/flexslider/fonts/flexslider-icon.ttf
Request Method:GET
Status Code:200 OK
Request Headers]
Accept:*/*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:pt-BR,pt;q=0.8,en-US;q=0.6,en;q=0.4
Cache-Control:no-cache
Connection:keep-alive
Cookie:42099b4af021e53fd8fd4e056c2568d7c2e3ffa8=47a0eb41255ef509f4f834a20b5e0a80; WEBSITE_LANGUAGE_ID=1; WEBSITE_LANGUAGE_CODE=pt-br; _gat=1; 2796f347b370f841cf4073d1b3834ec019e6d2f4=d37cabbc36cfaa34508ce57a4ed237e8; __utma=65801017.1238778210.1411492809.1411492809.1411492809.1; __utmb=65801017.10.10.1411492809; __utmc=65801017; __utmz=65801017.1411492809.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none); __zlcmid=Qye50l3YnSWoJv; WEBSITE_FORM_NEWS_TOKEN=%3DAFVxIkVWpVYWxmSW5UVkpWVwA3VVpmRSJlRalVUtVTVUFjWzV1aaNlYHpkdTxmVaN2aKVVVB1TP
Host:domain.com
Pragma:no-cache
Referer:http://domain.com/resources/build/all.css?v=1411407970
User-Agent:Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.120 Safari/537.36
Response Headersview source
Accept-Ranges:bytes
Cache-Control:max-age=2592000
Connection:Keep-Alive
Content-Encoding:gzip
Content-Length:1201
Content-Type:font/ttf
Date:Tue, 23 Sep 2014 17:43:42 GMT
Expires:Thu, 23 Oct 2014 17:43:42 GMT
Keep-Alive:timeout=5, max=96
Last-Modified:Mon, 23 Jun 2014 20:51:58 GMT
Server:Apache/2.2.22 (Unix) mod_ssl/2.2.22 OpenSSL/0.9.8e-fips-rhel5 DAV/2 SVN/1.6.11 mod_auth_passthrough/2.1 mod_bwlimited/1.4 FrontPage/5.0.2.2635
Vary:Accept-Encoding
Headers of the HTTP request with subdomain:
Remote Address:server-ip:80
Request URL:http://static.domain.com/resources/vendor/flexslider/fonts/flexslider-icon.ttf
Request Method:GET
Status Code:200 OK
[Request Headers]
Accept:*/*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:pt-BR,pt;q=0.8,en-US;q=0.6,en;q=0.4
Cache-Control:no-cache
Connection:keep-alive
Host:static.domain.com
Origin:http://domain.com
Pragma:no-cache
Referer:http://static.domain.com/resources/build/all.css?v=1411407970
User-Agent:Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.120 Safari/537.36
[Response Headers]
Accept-Ranges:bytes
Cache-Control:max-age=2592000
Connection:Keep-Alive
Content-Encoding:gzip
Content-Length:1201
Content-Type:font/ttf
Date:Tue, 23 Sep 2014 17:45:08 GMT
Expires:Thu, 23 Oct 2014 17:45:08 GMT
Keep-Alive:timeout=5, max=97
Last-Modified:Mon, 23 Jun 2014 20:51:58 GMT
Server:Apache/2.2.22 (Unix) mod_ssl/2.2.22 OpenSSL/0.9.8e-fips-rhel5 DAV/2 SVN/1.6.11 mod_auth_passthrough/2.1 mod_bwlimited/1.4 FrontPage/5.0.2.2635
Vary:Accept-Encoding
The only notable difference between requests are cookies, that request without the subdomain cookies are not in the request (recalling, that is the goal of using a subdomain requests for static resources).
Upvotes: 2
Views: 3357
Reputation: 1965
As the answer given by @aalih in comments, the solution is here:
@font-face fonts only work on their own domain
Upvotes: 2