Voici un post pour vous expliquer rapidement comment exploiter une police au format .otf ou .ttf dans votre code CSS à l’aide de l’attribut @font-face. Tout ceci évidemment avec votre mac préféré.

  1. X11
  2. Xcode
  3. Macports
  4. Fontforge (sudo port install fontforge)
  5. ttf2eot (sudo port install ttf2eot)
  6. batik 1.7

Si votre police est au format .otf, il vous faut en premier lieu la convertir à l’aide de fontforge au format .ttf, ceci se fait en suivant ce tuto.

Une fois que vous avez une police au format .ttf, allez dans le terminal et lancé la commande suivant :

ttf2eot < path/to/mapolice.ttf > path/to/mapolice.eot

Vous devriez avoir une belle police au format .eot (compatible de IE4 -> IE7).

Ensuite aller depuis le terminal dans le dossier qui contient batik, et lancé la commande :

java -jar batik-ttf2svg.jar path/to/mapolice.ttf -o path/to/mapolice.svg -id mapolice

Ceci vous créera un fichier .svg compatible avec chrome et opéra 9.

Il ne vous reste plus qu’a éditer votre fichier css et y a insérer le code suivant :

@font-face {
    font-family: 'mapolice';
    src: url('mapolice.eot');
    src: local('ma police'), url('mapolice.svg#mapolice') format('svg'), url('mapolice.otf') format('opentype');
    }