Weblog posts tagged with fonts
Setting HTTP headers on CSS fonts for great justice (and performance)
Some tips for configuring your web server for optimum performance when using CSS fonts (’@font-face’, as some would call it).
1. Certain types of font files don’t have any sort of compression in the actual file, so your web server should be configured to serve them up compressed. Compressing the font files can give significant file size savings, Museo Sans weighs in at 48KB for the TTF version, gzip compression drops this to 26KB. Compressing SVG can give even greater savings – from 53KB down to 15KB.
2. Setting a far future Expires header for font files will make them cachable & reduce HTTP requests on subsequent visits.
3. In addition, not having the correct content type can cause display issues (i.e. they don’t display at all).
This handy table summarises what is what:| Name | Extension | Compressed file? | Content type |
|---|---|---|---|
| EOT | .eot | yes | application/vnd.ms-fontobject |
| TrueType | .ttf | no | font/ttf |
| OpenType | .otf | no | font/opentype |
| WOFF | .woff | yes | font/x-woff |
| SVG | .svg | no | image/svg+xml |
Clear as mud? Okay, let’s move on to…
Configuring the server
Three things need to be done: - enable gzip compression for the non-compressed fonts (TTF, OTF & SVG) - add correct content types for all font types - add far future expires header for all font files
Configuration for specific servers will differ, but these should get you started:
Apache 2:
IIS7:
Nginx:
This doesn’t cover all the other juicy bits you can do to improve performance when using CSS fonts – removing kerning, subsetting, base64 encoding, etc. – these will be dependent on your own personal preferences & the needs of your particular project.