@font-fa©e !

jeudi 12 novembre 2009 | graphisme, programmation

fontface

Voici la technique la plus facile pour choisir (enfin) une police en html, le @font-face !
Magique ?

/* Graublau Sans Web (www.fonts.info) */
@font-face {
font-family: Graublau Sans Web;
src: url(GraublauWeb.otf) format(« opentype »);
}
body {
font-family: Graublau Sans Web, Lucida Grande, sans-serif;
}

L’exemple vient de cette page (que je vous invite à lire) :
http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/
Mais si on RTFM un peu :) et qu’on connait le monde de la typo (des bisounours ?), la magie a ses limites ; ici GraublauWeb.otf est distribué gratuitement et son auteur autorise l’encapsulage (embed) web, donc si vous voulez mettre une police commerciale comme l’helvetica Neue, c’est facile mais c’est pas bien !
Rapidement, avec les bases du html et css, n’importe qui peut télécharger le fichier de la typo.
Comme je suis sympa, voici l’exemple (piquer encore) à suivre pour utiliser l’helvetica neue si elle présente chez l’utilisateur (mais là, je ne vois plus l’intérêt du font-face !)

/* MgOpen Moderna */
/* http://www.zvr.gr/typo/mgopen/index */

@font-face {
font-family: MyHelvetica;
src: local(« Helvetica Neue »),
local(« HelveticaNeue »),
url(MgOpenModernaRegular.ttf);
}

@font-face {
font-family: MyHelvetica;
src: local(« Helvetica Neue Bold »),
local(« HelveticaNeue-Bold »),
url(MgOpenModernaBold.ttf);
font-weight: bold;
}

body { font-family: MyHelvetica, sans-serif; }

On va terminer sur une note d’espoir avec des typos embedables légalement.
http://spyrestudios.com/21-awesome-font-face-embedable-typefaces/
http://opentype.info/demo/webfontdemo.html


tags : , ,

2 commentaires

Marin le 12 Nov 2009 vers 14:04

il y a une css « bulletproof » pour embedder les fontes:
http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

La resource complete se trouve sur fontsquirrel.com

:)

Den Chamanie le 19 Nov 2009 vers 10:56

J’ai essayé sur un site le « truc » @font-face… bin c’est pas vraiment top, ça marche pas toujours, bizarrement l’appel dans le css ne se faisait pas à tout les coups !!! et quand ca marche pas c’est l’horreur sur le site. J’ai abandonné.
Par contre je profite de ce commentaire pour faire connaître iXedit, terrible pour faire du javascript les doigts dans le nez : http://www.ixedit.com

Comments are closed.