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 , alors après votre lecture, n'hésitez pas.

Article lu fois.

L'auteur

Vincent Viale

L'article

Publié le 24 octobre 2012 - Mis à jour le 13 mars 2013

Version PDF Version hors-ligne

ePub, Azw et Mobi

Liens sociaux

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 :

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

La police est chargée :

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

Il faut maintenant cocher la case « SVG »:

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 :

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 » :

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

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

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, FirePrawn, MuchosMuchos et jreaux62jreaux62.

Et pour la correction orthographique et syntaxique : ClaudeLELOUP.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants :