Home > HowTo, Linux, Windows > font woff problem

font woff problem

March 21st, 2013 Leave a comment Go to comments

roblem:
The default webserver (Apache/IIS) does not have some fonts format ‘we’ added to the website
This result in the browser, specially firefox to take long time to load the page.
The problem is clearly much worst in Firefox, do it yourself a test open this on each browser
http://www.stevesouders.com/tests/font-face/fout.php

Solution:
1) Cache with varnish
2) Set the Mime/Type’s, compress the font, maintain it on the browser for 10 years!

2a) On IIS you should add it too

2b)On Apache you should add:

# Font mime/type, expire,compress

AddType font/ttf .ttf
AddType font/otf .otf
AddType font/x-woff .woff
AddType image/svg+xml .svg
AddType application/vnd.ms-fontobject .eot

ExpiresByType font/ttf “access plus 10 years”
ExpiresByType font/otf “access plus 10 years”
ExpiresByType application/vnd.ms-fontobject “access plus 10 years”
ExpiresByType font/x-woff “access plus 10 years”
ExpiresByType image/svg+xml “access plus 10 years”

AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject

Ref,:
What Paul calls FOUT
http://paulirish.com/2009/fighting-the-font-face-fout/#update2011
More about font-face woff
http://webdesign.about.com/od/fonts/a/woff.htm
Some people said it was possible to fix it using this CSS yui, I have not tested the above.
http://developer.yahoo.com/yui/reset/
About the slow load
http://stackoverflow.com/questions/12251805/font-face-is-causing-slow-load-times

  1. No comments yet.
  1. No trackbacks yet.

VAMOVE *

*