Pixelastic

You can clip our wings but we will always remember what it was like to fly.

Posts tagged with ".otf"

Gzipping your font files

When using @font-face to display fonts, you have to create a whole bunch of font files on your server to accomodate the quirks of the various browsers.

If you do things right (or follow the automatic kit build of FontSquirell), you should get a .eot file for IE, a .ttf/.otf file for current browsers, a .svg file for Chrome and the iPhone/iPad and a .woff file for the next browser generation.

Unfortunatly, you'll have to cope with that because there isn't much we can do about it at the moment.

But you can compress those files to make the font rendering faster. Some browsers even download all the fonts even if they will only use one, so compress them !

The easiest way is to configure your server to automatically gzip them. You should already have done that for your css and js file so it is just a matter of adding new types.

As far as I know .otf and .ttf files don't have registered mimetype, so I had to create a dummy one for them in my .htaccess :

AddType x-font/otf    .otf
AddType x-font/ttf    .ttf
AddType x-font/eot    .eot

I also added the .eot because even if an application/vnd.ms-fontobject mimetype is registered for this obscure microsoft format, when I tried to add a deflate rule on it, my Apache crashed so I took the safest way of defining a custom mimetype.

I prefixed them with an x- to make sure that it won't mess with existing mimetypes.

The second part was to add gziping to those

AddOutputFilterByType DEFLATE x-font/otf x-font/ttf x-font/eot

SVG files are in fact xml files, and you should already have them gzipped, so no need to add them here.

I haven't included .woff files because .woff files are already compressed files, so you don't need to gzip them.

Polices de caractère !

Ah elles en ont du caractère ces polices ! Elle m'en font voir de toutes les couleurs...

Pour l'intégration sur laquelle je travaille, certains titres utilisent une police spéciale, et pour intégrer ça grâce ) @font-face et Cufon, il me faut les fichiers de police sous différents formats.

La graphiste m'a fournie la police, sous format .dfont (package de plusieurs font à la sauce Mac). J'ai pu extraire le package grâce à DFontSplitter, ce qui m'a donné plein de polices .ttf.

Corrompues, d'ailleurs, qu'il m'a fallu réparer grâce à CrossFont (attention shareware de 15 jours). Sauf qu'il me convertit les fichiers en .otf.

Pas de soucis pour Firefox, Safari et Opera qui comprennent ce format très bien, mais pour IE, je dois convertir ça en .eot (grâce ce converter en ligne).

Qui ne prends malheureusement que des .ttf comme source... Impossible de trouver un converter otf => ttf sous windows qui ne demande pas d'installer des tas de choses, je suis donc passé sous mon Ubuntu, ai téléchargé FontForge : Open => Generate Font => ttf et voila

 

Edit : Et hop, un autre converter en ligne de plus (otf, ttf, dfont)