Bon, Ok, donc en gros, si on crée un site et qu'on souhaite utiliser une police standard, on ira piocher parmi celles proposées de base genre l'Arial, le Courrier, le Tahoma, la Georgia… C'est évidemment assez vite limité… Heureusement il existe Flash qui permet d'éviter de tout faire en HTML et apporte, du coup, une totale liberté dans la créativité… Sauf que, le Flash, c'est + lourd, il faut un lecteur spécifique pour pouvoir le lire et niveau référencement, Google n'aime pas trop ça. Alors, depuis un moment et avec l'explosion des blogs et des réseaux sociaux, il est clair que les Webdesigners se sont mis à fond dans l'utilisation des CSS qui là aussi apportent une grande part de liberté…
On a donc pas mal de techniques permettant d'obtenir une police de son choix genre indiquer celle-ci en CSS (mais si l'internaute ne l'a pas installé sur son poste, il verra une police de subsitution standard à la place) c'est le cas sur notre site Lourdson, si vous avez chez vous la police Rockwell installée, vous la verrez sur le site, sinon, vous verrez de la "Georgia". Ensuite, vous avez la possibilité d'utiliser des choses comme Typeface ( du Javascript avec de l'HTML5 canvas et VML) ou sIFR (mélange de Javascript et de Flash) qui sont vraiment pas mal mais toujours assez lourds et pas top non plus pour le référencement, en plus, il faut que le texte reste évidemment "sélectionnable"pour que ce soit intéressant. Et puis, est arrivé une lueur d'espoir nommée Typekit ! Je vous invite à lire cet excellent article résumant ses intérêts et ses inconvénients. Mais la bonne nouvelle c'est que "The Solution"semble être arrivée avec les Web FontFont !!
Aujourd'hui FSI Fontshop tente d'offrir des polices spécifiquement conçues pour l'utilisation sur le Web. vous trouverez plus de 30 familles nommées FontFont disponibles ici ! On retrouve par exemple la police DIN. Ca fait un moment que tout ce joli monde de la typographie bosse sur ces projets et à en croire cette annonce, ça a l'air de le faire…

En tout cas, avec l'ami Chris, on a regardé rapidement et le système utilisé a l'air vraiment sympa ! Dans le Code source, le texte apparaît bien en "texte" et sur la page Web c'est une sorte d'image coupée qui permet de récupérer l'image générale du titre ou de copier coller un groupe de lettre comme du texte normal. Ca marche sur pratiquement tous les navigateurs, on a testé sur Firefox, Chrome, IE 6, 7 et 8… Il semblerait que ça ne marche pas encore sur tous les "Chrome" et "Safari" mais ça ne devrait pas tarder…
Pour un peu mieux comprendre ce qu'il se passe, je vous invite à lire ceci en anglais… Et pour les plus fainéants, voici des Googles traductions ici et là .
Au niveau "droits" si j'ai bien compris, on achète une licence au moment de la création pour pouvoir la proposer sur son site, mais derrière, pour le visiteur il n'y a aucun DRM car ces fonts ne fonctionnent qu'à travers des sites webs et non dans des applications de bureau, genre Photoshop.
Je vous avouerais ne pas avoir tout compris (j'ai peut être raconté de grosses bêtises n'étant pas spécialiste) mais si certains d'entre vous ont plus d'infos, n'hésitez pas à me reprendre et à ajouter des d'infos supplémentaires dans les commentaires, je mettrai mon billet à jour !
Merki !
En tout cas, ce genre de libertés typographiques + le développement du CSS3 et de l'HTML5… ça laisse présager de jolies choses pour la suite
!
++ Tony

Corel Painter 12 - Les fondamentaux
Introduction à Adobe Edge
Contao - Les fondamentaux
ZBrush 4 - Les fondamentaux
Drupal 7 - Les fondamentaux
Photoshop Elements 10 - Les fondamentaux
Premiere Elements 10 - Les fondamentaux
Les calques de forme dans After Effects

, vous aurez compris que je parle évidemment des Fonts. Vous savez que depuis bien longtemps, les webdesigners rêvent de pouvoir utiliser n'importe quelle police sur leurs sites webs. Le truc, c'est que les standards imposés par l'HTML et la multiplication incessante des navigateurs compliquent la tâche… Car oui, un lecteur devant son mac ou son PC ne voit pas forcément la même chose que vous… Ce temps là semble être révolu !














Contacts
Newsletter
Twitter
RSS
RSS des commentaires
Podcasts des tutoriels













Commentaires
Sympa ... mais payant ! Son avenir ne me parait pas si radieux du coup.
Perso j'utilise @font-face en CSS, beaucoup plus léger que sifr et ça passe sur IE moyennant la création d'une police exclusivement pour IE (extension eot). Petit bémol, la police est téléchargée par l'internaute et il faut une police par type (Gras / Italique / Gras et Italique ...) A utiliser avec parcimonie donc !
Pour plus d'infos lisez ça : http://covertprestige.info/css/font...
C'est sûr que c'est payant… mais on a tous un peu tendance à oublier que les Fonts sont payantes
ensuite, je suis d'accord avec toi sur le fait que le web va forcément vers le gratuit, le nombre de polices "free" complètes de qualité en est la preuve…
Mais à mon avis, comme dab, nous n'en sommes qu'au début et pas mal de choses devraient à l'avenir devenir gratuit ou en tout cas beaucoup moins cher…
En tout cas, le fait de pouvoir proposer ce service est quand même top
Ou alors, utiliser http://www.fontsquirrel.com/, qui permet d'utiliser des @font-face .ttf et .eot, prédefinis, ou en fabriquer a partir de polices personnelles.
A tester !
L'idéal serait que les navigateurs puisse charger temporairement une police .otf placée sur le serveur avec le site et spécifiée dans la feuille de style css. Ça doit bien être possible de mettre ça en place de manière transparente sans embêter le visiteur avec des boîtes de dialogues demandant un téléchargement.
@Pierluc : C ce que j'explique dans le premier comment : Télécharger, c au sens HTML, cà d quand tu affiches une page web, le code HTML, les images (et donc les polices dans notre cas) sont "téléchargés" sur ton ordi, pas de boite de dialogue bien sur
Je précisais cela car certaines polices sont assez lourdes, donc si tu ajoutes tous les styles, ça risque d'augmenter le poids de ta page de plusieurs centaines de Ko voire de quelques Mo !!
@PAF! : Meric pour le lien Font Squirrel
Hello ici,
merci pour le lien vers mon article