Un meilleur job mieux payé ?

Deviens chef de projet, développeur, ingénieur, informaticien

Mets à jour ton profil pro

ça m'intéresse

Comment utiliser une police personnalisée sur un site Web ?

@font-face

Qui n'a pas rêvé un jour de mettre sa police sur son site Web, eh bien maintenant cela est possible avec CSS3 et la propriété @font-face.

Vous pouvez commenter l'article en suivant le lien suivant : 7 commentaires Donner une note à l'article (5), alors après votre lecture, n'hésitez pas.

Article lu   fois.

L'auteur

Profil ProSite personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Introduction

Cette fonction avait été introduite dans la version CSS2, puis supprimée dans la version CSS2.1, et elle est de nouveau de retour dans la version CSS3.

Il est possible d'utiliser une image pour afficher correctement le texte dans tous les navigateurs, par contre ce texte ne peut être référencé et sélectionné. La propriété @font-face permet de pallier ce « manque ».

Attention, l'ajout de polices personnalisées peut ralentir le chargement de la page.

Mais avant toute chose, il faut que la police vous appartienne ou que l'auteur donne l'autorisation de l'utiliser.

II. La syntaxe

La syntaxe est toute simple, elle permet de couvrir tous les navigateurs qui peuvent utiliser cette propriété :

font-face
Sélectionnez
@font-face {
   font-family: 'PolicePerso';
   src: url('PolicePerso.eot');
   src: url('PolicePerso.eot?#iefix') format('embedded-opentype'),
        url('PolicePerso.woff') format('woff'),
        url('PolicePerso.otf') format('otf'),
        url('PolicePerso.ttf') format('truetype'),
        url('PolicePerso.svg#PolicePerso') format('svg');
 
 
}

Ça y est je suis perdu, je ne comprends plus rien !

Quelques explications sur la syntaxe :

EOT - Embedded OpenType font

EOT
Sélectionnez
url('PolicePerso.eot') /* Pour IE9 et + */
url('PolicePerso.eot?#iefix') format('embedded-opentype') /* Pour IE6-IE8 */

WOFF - Web Open Font Format

WOFF
Sélectionnez
url('PolicePerso.woff') format('woff') /* Pour les navigateurs modernes */

TTF/OTF - TrueType and OpenType font support

TFF
Sélectionnez
url('PolicePerso.otf') format('otf') /* Safari, iOS, Mobile */
url('PolicePerso.ttf') format('truetype') /* Firefox, Safari, iOS, Mobile */

SVG fonts

SVG
Sélectionnez
url('PolicePerso.svg#PolicePerso') format('svg') /* iOS, Mobile */

Compatibilité des différents navigateurs :

À partir de... IE Firefox Chrome Safari Opera iOS Safari Android Browser BlackBerry Browser Opera Mobile Chrome for Android Firefox for Android
EOT 6.0                    
WOFF 9.0 3.6 5.0 5.1 11.1 5.0   7.0 11.0 18.0 15.0
SVG     4.0 3.2 9.0 3.2 3.0 7.0 10.0 18.0  
TTF/OTF   3.5 4.0 3.1 10.0 4.2 2.2 7.0 10.0 18.0 15.0

III. Exemple

Maintenant passons au premier exemple.

III-A. La police

Dans notre cas nous allons prendre la police « sansation » (qui est une police gratuite et que l'on peut utiliser dans notre cas).

Mais nous n'avons généralement que le fichier tff, il faut donc créer les autres fichiers.

FontSquirrel est un site qui propose des polices gratuites pour un usage commercial. Mais il possède aussi un générateur pour @font-face, c'est cet outil qui va nous servir.

Vous arrivez sur la page suivante :

Image non disponible

Maintenant, il faut fournir le fichier tff, il suffit de cliquer sur « Add Fonts » et d'aller chercher le fichier tff :

Image non disponible

La police est chargée :

Image non disponible

Pour obtenir tous les fichiers nécessaires, il faut choisir le mode expert :

Image non disponible

Il faut maintenant cocher la case « SVG »:

Image non disponible

Il existe d'autres fonctions sur la page que je vous laisse découvrir.

Dans les « Options avancées », vous pouvez enlever le « Suffix », cela fera des noms de fichiers plus courts :

Image non disponible

Récupérons maintenant le fichier, il faut pour cela cocher « Yes, the fonts... » qui dit que la police est légalement admissible à l'intégration Web, et ensuite cliquer sur « Download Your Kit » :

Image non disponible

Vous obtenez un fichier ZIP de la forme « webfontkit-20121010-043939.zip », et ce dernier contient les fichiers suivants :

Image non disponible

Les fichiers EOT, SVG, TTF et WOFF y sont présents.

III-B. La feuille de style

Dans le fichier ZIP présent, il y a le fichier « stylesheet.css » qui contient le code de la propriété @font-face :

@font-face
Sélectionnez
@font-face {
    font-family: 'sansationregular';
    src: url('sansationregular.eot');
    src: url('sansationregular.eot?#iefix') format('embedded-opentype'),
         url('sansationregular.woff') format('woff'),
         url('sansationregular.ttf') format('truetype'),
         url('sansationregular.svg#sansationregular') format('svg');
    font-weight: normal;
    font-style: normal;
 
}

Que signifient les deux dernières lignes ?

La propriété @font-face permet de rajouter des polices personnalisées, mais il faut aussi décliner toutes les « versions » : Bold, Italic et Bold-Italic, et ces deux lignes servent à les définir. Par défaut les valeurs sont « normal ».

À chacun de voir, s'il a besoin ou pas de toutes les versions de la police.

Dans mon cas la feuille de style devient donc :

styles.css
Sélectionnez
@font-face {
    font-family: 'sansation';
    src: url('sansationbold.eot');
    src: url('sansationbold.eot?#iefix') format('embedded-opentype'),
         url('sansationbold.woff') format('woff'),
         url('sansationbold.ttf') format('truetype'),
         url('sansationbold.svg#sansationbold') format('svg');
    font-weight: bold;
    font-style: normal;
}
 
@font-face {
    font-family: 'sansation';
    src: url('sansationitalic.eot');
    src: url('sansationitalic.eot?#iefix') format('embedded-opentype'),
         url('sansationitalic.woff') format('woff'),
         url('sansationitalic.ttf') format('truetype'),
         url('sansationitalic.svg#sansationitalic') format('svg');
    font-weight: normal;
    font-style: italic;
}
 
@font-face {
    font-family: 'sansation';
    src: url('sansationregular.eot');
    src: url('sansationregular.eot?#iefix') format('embedded-opentype'),
         url('sansationregular.woff') format('woff'),
         url('sansationregular.ttf') format('truetype'),
         url('sansationregular.svg#sansationregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
@font-face {
    font-family: 'sansation';
    src: url('sansationbolditalic.eot');
    src: url('sansationbolditalic.eot?#iefix') format('embedded-opentype'),
         url('sansationbolditalic.woff') format('woff'),
         url('sansationbolditalic.ttf') format('truetype'),
         url('sansationbolditalic.svg#sansationbold_italic') format('svg');
    font-weight: bold;
    font-style: italic;
}

Voici un exemple si l'on utilise toutes les versions ou juste la police Regular :

Avec les différentes versions Avec juste SansationRegular
Image non disponible Image non disponible

Vous constatez bien qu'il y a une différence. L'affichage est plus joli avec toutes les versions.

III-C. La page HTML

Pour appeler la police, il suffit de rajouter dans la feuille de styles les lignes suivantes :

styles.css
Sélectionnez
body {
    font-family: 'sansation';
}

Et le fichier HTML devient :

index.html
Sélectionnez
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="styles.css" type="text/css" charset="utf-8" />
</head>
<body>
    <p>Ligne 1</p>
    <p><strong>Ligne 2</strong></p>
    <p><em>Ligne 3</em></p>
    <p><strong><em>Ligne 4</em></strong></p>
</body>
</html>

Exemple

IV. Compléments

IV-A. Police en ligne

Nous avons vu qu'il faut indiquer où se trouve le fichier de la police, mais le lien peut aussi pointer sur un fichier d'un autre site :

@font-face
Sélectionnez
src: url('sansationregular.eot')
ou
src:url(http://monautresite/sansationregular.eot);

Il existe aussi des sites qui mettent des polices à disposition comme Google Web FontsGoogle Web Fonts ou Adobe Edge Web FontsAdobe Edge Web Fonts, mais il en existe d'autres.

Par exemple : prenons une police sur le site Google Web Fonts, il suffira alors d'ajouter dans votre page la commande suivante pour pouvoir ensuite l'utiliser :

fichier
Sélectionnez
<link href='http://fonts.googleapis.com/css?family=Monda' rel='stylesheet' type='text/css'> 

IV-B. Mise en forme dans la feuille de style

Il est aussi possible de mettre en forme le texte dans la feuille de style, en rajoutant les lignes suivantes :

style.css
Sélectionnez
p.PolReg{
    font-weight: normal;
    font-style: normal;
}
p.PolBold{
    font-weight: bold;
    font-style: normal;
}
p.PolItalic{
    font-weight: normal;
    font-style: italic;
}
p.PolDeux{
    font-weight: bold;
    font-style: italic;
}

Et le fichier HTML deviendra :

index.html
Sélectionnez
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="styles.css" type="text/css" charset="utf-8" />
</head>
<body>
    <p class="PolReg">Ligne 1</p>
    <p class="PolBold">Ligne 2</p>
    <p class="PolItalic">Ligne 3</p>>
    <p class="PolDeux">Ligne 4</p>
</body>
</html>

V. Les fichiers

Voici le fichier ZIP contenant les polices : Sansation.

Voici le fichier ZIP contenant l'exemple : HTML + CSS.

VI. Remerciements

Pour leurs remarques directes ou indirectes et conseils avisés : Torgar, FirePrawnMuchosMuchos et jreaux62jreaux62.

Et pour la correction orthographique et syntaxique : ClaudeLELOUP.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Licence Creative Commons
Le contenu de cet article est rédigé par Vincent VIALE et est mis à disposition selon les termes de la Licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Pas de Modification 3.0 non transposé.
Les logos Developpez.com, en-tête, pied de page, css, et look & feel de l'article sont Copyright © 2013 Developpez.com.