Ajouter des polices avec @font-face

Ajouter des polices avec @font-face
Attention, tuto non terminé

Avec l'arrivée du CSS3, vous pouvez ajouter à votre blog des polices supplémentaires soit en utilisant Google Web Fonts, soit en utilisant la propriété CSS @font-face. C'est sur ce dernier cas que porte le tuto. Voyez ci-dessous un apperçu de quelques polices:

A Savoir

L'exemple ci-dessus a été placé dans une iframe. Pourquoi ? En réalité, même si les navigateurs récents sont capables de gérer @font-face, ils ne le font pas tous de la même façon. Plus précisément, pour certains d'entre eux, il est nécessaire que les fichiers de polices soient hébergés sur le même serveur que la feuille de style, ce qui n'est pas le cas sur Eklablog.

En conséquence, il n'est pas judicieux d'utiliser @font-face pour les titres ou textes de nos blogs puisque la police utilisée sera visible avec Chrome mais pas avec Firefox ou Internet Explorer.

Cependant, cela peut représenter une bonne alternative pour des éléments isolés que l'on intègrera avec une iframe.

Télécharger les polices

Il nous faut récupérer tout d'abord une police libre de droits. Comme je l'ai indiqué dans l'iframe, vous pouvez en télécharger sur:
- Font Squirrel
- Dafont
- 1001 Polices
Je vous conseille Font Squirrel qui présente l'avantage de fournir les polices pour tous les navigateurs (bien qu'ils disposent d'un outil )

Une fois votre police choisie, cliquez sur Get Kit. Vous récupérez alors un fichier zip qui contient:
- 4 fichiers de police (.ttf, .svg, .eot et .woff)
- 1 fichier demo.html
- 1 fichier style.css
- 1 fichier texte de license
Copiez parmi les fichiers de votre blog les 4 fichiers de police et le fichier style.css

Création du fichier HTML

C'est le fichier que nous allons appeler avec l'iframe. Le code de ce fichier est le suivant:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Titre</title> <style type="text/css"> /* Generated by Font Squirrel (http://www.fontsquirrel.com) on June 20, 2012 */ @font-face { font-family: 'BeforetheRainRegular'; src: url('http://data0.ek.la/le-blog-facile/perso/polices/beforetherain-webfont.eot'); src: url('beforetherain-webfont.eot?#iefix') format('embedded-opentype'), url('beforetherain-webfont.woff') format('woff'), url('beforetherain-webfont.ttf') format('truetype'), url('beforetherain-webfont.svg#BeforetheRainRegular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'IronMaidenRegular'; src: url('http://ekladata.com/igLb6kJUGvWBK1VAELenSXejbjM/maiden-webfont.eot'); src: url('http://ekladata.com/igLb6kJUGvWBK1VAELenSXejbjM/maiden-webfont.eot?#iefix') format('embedded-opentype'), url('http://data0.ek.la/le-blog-facile/perso/polices/maiden-webfont.woff') format('woff'), url('http://data0.ek.la/le-blog-facile/perso/polices/maiden-webfont.ttf') format('truetype'), url('http://data0.ek.la/le-blog-facile/perso/polices/maiden-webfont.svg#IronMaidenRegular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'RieslingRegular'; src: url('http://ekladata.com/C9GHYydbfT4bzkv-0rnTl4L30zQ/riesling-webfont.eot'); src: url('http://ekladata.com/C9GHYydbfT4bzkv-0rnTl4L30zQ/riesling-webfont.eot?#iefix') format('embedded-opentype'), url('http://data0.ek.la/le-blog-facile/perso/polices/riesling-webfont.woff') format('woff'), url('http://data0.ek.la/le-blog-facile/perso/polices/riesling-webfont.ttf') format('truetype'), url('http://data0.ek.la/le-blog-facile/perso/polices/riesling-webfont.svg#RieslingRegular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'SketchNiceRegular'; src: url('http://ekladata.com/U4aN8eeaZy2_45B1jeRLCclhkiU/sketch-nice-webfont.eot'); src: url('http://ekladata.com/U4aN8eeaZy2_45B1jeRLCclhkiU/sketch-nice-webfont.eot?#iefix') format('embedded-opentype'), url('http://data0.ek.la/le-blog-facile/perso/polices/sketch_nice-webfont.woff') format('woff'), url('http://data0.ek.la/le-blog-facile/perso/polices/sketch_nice-webfont.ttf') format('truetype'), url('http://data0.ek.la/le-blog-facile/perso/polices/sketch_nice-webfont.svg#SketchNiceRegular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'SteinerRegular'; src: url('http://ekladata.com/TjziOORjA3ToVkkGcSDGYba2kJo/steinerlight-webfont.eot'); src: url('http://ekladata.com/TjziOORjA3ToVkkGcSDGYba2kJo/steinerlight-webfont.eot?#iefix') format('embedded-opentype'), url('http://data0.ek.la/le-blog-facile/perso/polices/steinerlight-webfont.woff') format('woff'), url('http://data0.ek.la/le-blog-facile/perso/polices/steinerlight-webfont.ttf') format('truetype'), url('http://data0.ek.la/le-blog-facile/perso/polices/steinerlight-webfont.svg#SteinerRegular') format('svg'); font-weight: normal; font-style: normal; } </style> </head> <body> Il existe des myriades de polices toutes plus sympa les unes que les autres. Vous pouvez en telecharger par exemple sur <a href="http://www.dafont.com/fr/" target="_blank">dafont</a> ou <a href="http://www.1001freefonts.com/" target="_blank">1001 Polices</a>. Celle utilisee ici s'appelle Steinerlight Ou celle-ci qui s'appelle Sketch Nice Ou encore celle-ci qui s'appelle Riesling Le style Iron-Maiden n'est pas mal non plus. Bref, un choix colossal de polices. </body> </html>

Commencez par télécharger sur le site de votre choix la police que vous souhaitez. (voir les liens pour Dafont et 1001 Polices ci-avant).

Attention: Sur ces sites, certaines polices sont en démonstration ou soumises à donations. Veillez bien à en choisir une gratuite.

Ensuite enregistrer le fichier parmi les fichiers de votre blog. (Je vous conseille de le placer dans un répertoire que vous pouvez appeler Polices)

Enfin, il ne reste qu'à ajouter le code CSS comme ci-dessous.

Voilà, votre police est installée et il ne vous reste plus qu'à l'appliquer aux éléments choisis.

Ajouter le code CSS correspondant
// lien pour lancer la fonction Cliquez ici pour imprimer la zone

Edito

Ajouter des polices avec @font-face

A Savoir

Télécharger les polices

Création du fichier HTML