0

Per client's wishes we have two @font-face rules in the primary CSS for a site that should receive a fair amount of mobile traffic. These any one set (eg otf) of these files comes to around 130KB unless the SVG versions are used.

Looking at the dev console in Chrome it appears that these return a 200 on every load and never a 304 Not Modified header and makes me think they are part of the load weight of every page.

So my two question is whether anyone knows if that is accurate?

If mobile visitors have to pull these two files for every page load I will alter the media queries so these are not pulled for phones at least...

Any other mobile CSS optimization tips welcomed.

@font-face {
 font-family: 'SouvenirBQ-Medium';
 src: url('../fonts/SouvenirBQ-Medium.eot?') format('eot'), url('../fonts/SouvenirBQ-Medium.otf') format('opentype'), url('../fonts/SouvenirBQ-Medium.woff') format('woff'), url('../fonts/SouvenirBQ-Medium.ttf') format('truetype'), url('../fonts/SouvenirBQ-Medium.svg#SouvenirBQ-Medium') format('svg');
}
 @font-face {
 font-family: 'TrajanPro-Bold';
 src: url('../fonts/TrajanPro-Bold.eot?') format('eot'), url('../fonts/TrajanPro-Bold.otf') format('opentype'), url('../fonts/TrajanPro-Bold.woff') format('woff'), url('../fonts/TrajanPro-Bold.ttf') format('truetype'), url('../fonts/TrajanPro-Bold.svg#TrajanPro-Bold') format('svg');
}

EDIT Per this post I added the following to my htaccess file to try to get the font files cached

# Add correct content-type for fonts
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType image/svg+xml .svg

# Compress compressible fonts
AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-opentype image/svg+xml

ExpiresActive on

# Add a far future Expires header for fonts to make browsers cache
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-opentype "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"

However browsers continue to show a 200 for the fonts and not a 304 Not modified response.

Current response headers show the far expire date:

Accept-Ranges:bytes
Cache-Control:max-age=31536000
Connection:Keep-Alive
Content-Encoding:gzip
Content-Length:33841
Content-Type:application/x-font-opentype
Date:Sun, 10 Aug 2014 21:01:46 GMT
ETag:"b18f2a-e070-4fe3cfaf9a440"
Expires:Mon, 10 Aug 2015 21:01:46 GMT
Keep-Alive:timeout=5, max=94
Last-Modified:Tue, 15 Jul 2014 15:22:49 GMT
Server:Apache
Vary:Accept-Encoding

Any thoughts?

jerrygarciuh
  • 21,158
  • 26
  • 82
  • 139

1 Answers1

0

You can certainly cache font files because all google fonts have an expires header for a year from now.

Are you sure you're setting the correct headers for your fonts requests? I would look into that issue before removing them with media rules.

maxm
  • 3,412
  • 1
  • 19
  • 27
  • This site is hosted on a shared server. Can headers for a file type be specified via htaccess? – jerrygarciuh Aug 10 '14 at 20:34
  • Indeed they can be... http://stackoverflow.com/questions/13429540/setting-expire-headers-for-fonts-not-working – jerrygarciuh Aug 10 '14 at 20:47
  • Added far date expires headers, see them in response headers but files still have 200. If cached I should see 304, right? – jerrygarciuh Aug 10 '14 at 21:07
  • You should check out this answer: http://stackoverflow.com/questions/8858159/font-face-causes-performance-issues You'll need more than just that. – maxm Aug 10 '14 at 23:19