0

Font-face – Habillez votre texte !

Une des principales évolutions en matière de web design serait pour moi l’utilisation du font-face.

Le font-face c’est quoi ?

C’est la possibilité d’utiliser des nouvelles typographies « non standard » sur le web. Et oui les amis, nous ne sommes pas obligé d’écrire notre texte en Arial et nos titres en Verdana, il existe tous un tas de typo que votre cher graphiste aime utiliser sur ces maquettes et qui sont désormais facilement exportable sur le web. Le texte que tu lis actuellement est d’ailleurs dans une typo ‘Droid’ ^^

Je me souviens encore des premières maquettes avec des typographies impossibles à charger on devait insérer des cufon ou bien des images de texte.. bref c’est de l’histoire ancienne.

Utilisation de font-face

Il existe plusieurs techniques pour utiliser cette propriété CSS.

Créer vos propres font-face

La première est de convertir vos typographies pour obtenir un kit font face. Attention aux droits d’auteurs toutes les typos ne sont pas utilisables librement sur internet.

Voici le site pour pouvoir convertir une typographie : http://www.fontsquirrel.com/tools/webfont-generator

dossier_webfont

On retrouve dans l’archive la typographie dans différentes extensions (.eot, .svg, .woff, .ttf) permettant de couvrir le maximum de navigateur.

Il suffit de transférer par FTP les fichiers et ensuite de charger la typo dans le css. Pour se faire il faut ouvrir le fichier ‘stylesheet.css’ qui vous donne le code à insérer.

Pensez juste à modifier les liens d’accès au fonts. Ensuite pour l’utiliser, il suffit de déclarer la propriété font-family avec le bon nom ici : ‘cookieregular’

@font-face {
font-family: 'cookieregular';
src: url('cookie-regular-webfont.eot');
src: url('cookie-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('cookie-regular-webfont.woff') format('woff'),
url('cookie-regular-webfont.ttf') format('truetype'),
url('cookie-regular-webfont.svg#cookieregular') format('svg');
font-weight: normal;
font-style: normal;
}

Utilisez Google Webfonts

La deuxième possibilité et la meilleure selon moi, est d’utiliser Google Fonts.

C’est une librairie mise à disposition par Google de plusieurs dizaines de typographie au format web. En effet avec la technique précédente, il arrive que la conversion décale les lettres à l’usage. Là, aucun soucis les typos sont faites pour cela.

Il reste maintenant à ancrer cela chez nos chers amis graphistes pour qu’il utilise ces typos directement dans photoshop.

Le site dispose d’un moteur de recherche permettant de trouver la typo exacte.

Une fois votre bonheur trouvé, voici comment l’utiliser, il y a 3 méthodes :

google_font_methode

1 – Charger une feuille de style

2 – Utiliser un @import

3 – Du code javascript

Ensuite reste à utiliser la propriété font-family avec le nom de notre typo et le tour est joué.

Sur notre site l’ami du développeur on à fait le choix de la 1ere technique. Plus légère que les autres selon nous.

<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Droid+Sans:400,700' rel='stylesheet' type='text/css'>

Alors maintenant n’hésitez plus et utilisez les Font-face pour égayer vos sites web =) !

A propos de Thibault

Thibault a écrit 17 articles sur le blog.

Les amis de nos amis sont nos amis, alors partageons !

Laissez un commentaire





Si vous êtes un vrai développeur, vous devez savoir compter.
Alors on vous met au défi !
Si vous réussissez cette épreuve, nous nous ferons une joie de lire votre commentaire.