Publié le par benoit

Bien utiliser @font-face n’est pas toujours simple, voici un exemple avec le caractère Faune.
Le Faune est « Un caractère typographique créé par Alice Savoie » pour « Une commande du Centre national des arts plastiques ».
Un excellent site explique le projet à cette adresse : http://www.cnap.graphismeenfrance.fr/faune/.

Néanmoins, à l’heure actuelle le site étant en « http », si votre site est en « https », la méthode de la feuille de style liée (comme sur Google Font), ne marchera pas sur les navigateurs modernes.

<link rel='stylesheet' href='http://www.cnap.graphismeenfrance.fr/faune/styles/faune-fontes.css'><!-- pas en https -->

La solution consiste à télécharger la fonte (en .zip sur le site).

Renommer le dossier Webfonts (en bleu sur l’image) en « fonts ».
Copier ce dossier « fonts » dans le même dossier que votre feuille de styles.
Ajouter ce code au début de votre feuille de styles :

@font-face {
  font-family: Faune;
  src: url(fonts/eot/Faune-Display_Thin.eot);
  src: url(fonts/eot/Faune-Display_Thin.eot?#iefix) format("embedded-opentype"),
       url(fonts/woff2/Faune-Display_Thin.woff2) format("woff2"),
       url(fonts/woff/Faune-Display_Thin.woff) format("woff"),
       url(fonts/ttf/Faune-Display_Thin.ttf) format("truetype"),
       url(fonts/svg/Faune-Display_Thin.svg#Faune-Display_Thin) format("svg");
  font-weight: 100;
  font-style: normal
}
 
@font-face {
  font-family: Faune;
  src: url(fonts/eot/Faune-Text_Bold.eot);
  src: url(fonts/eot/Faune-Text_Bold.eot?#iefix) format("embedded-opentype"),
       url(fonts/woff2/Faune-Text_Bold.woff2) format("woff2"),
       url(fonts/woff/Faune-Text_Bold.woff) format("woff"),
       url(fonts/ttf/Faune-Text_Bold.ttf) format("truetype"),
       url(fonts/svg/Faune-Text_Bold.svg#Faune-Bold) format("svg");
  font-weight: 700;
  font-style: normal
}
 
@font-face {
  font-family: Faune;
  src: url(fonts/eot/Faune-Text_Italic.eot);
  src: url(fonts/eot/Faune-Text_Italic.eot?#iefix) format("embedded-opentype"),
       url(fonts/woff2/Faune-Text_Italic.woff2) format("woff2"),
       url(fonts/woff/Faune-Text_Italic.woff) format("woff"),
       url(fonts/ttf/Faune-Text_Italic.ttf) format("truetype"),
       url(fonts/svg/Faune-Text_Italic.svg#Faune-Text_Italic) format("svg");
  font-weight: 400;
  font-style: italic
}
 
@font-face {
  font-family: Faune;
  src: url(fonts/eot/Faune-Display_Black.eot);
  src: url(fonts/eot/Faune-Display_Black.eot?#iefix) format("embedded-opentype"),
       url(fonts/woff2/Faune-Display_Black.woff2) format("woff2"),
       url(fonts/woff/Faune-Display_Black.woff) format("woff"),
       url(fonts/ttf/Faune-Display_Black.ttf) format("truetype"),
       url(fonts/svg/Faune-Display_Black.svg#Faune-Display_Black) format("svg");
  font-weight: 900;
  font-style: normal
}
 
@font-face {
  font-family: Faune;
  src: url(fonts/eot/Faune-Display_Bold_Italic.eot);
  src: url(fonts/eot/Faune-Display_Bold_Italic.eot?#iefix) format("embedded-opentype"),
       url(fonts/woff2/Faune-Display_Bold_Italic.woff2) format("woff2"),
       url(fonts/woff/Faune-Display_Bold_Italic.woff) format("woff"),
       url(fonts/ttf/Faune-Display_Bold_Italic.ttf) format("truetype"),
       url(fonts/svg/Faune-Display_Bold_Italic.svg#Faune-Display_Bold_Italic) format("svg");
  font-weight: 700;
  font-style: italic
}
 
@font-face {
  font-family: Faune;
  src: url(fonts/eot/Faune-Text_Regular.eot);
  src: url(fonts/eot/Faune-Text_Regular.eot?#iefix) format("embedded-opentype"),
       url(fonts/woff2/Faune-Text_Regular.woff2) format("woff2"),
       url(fonts/woff/Faune-Text_Regular.woff) format("woff"),
       url(fonts/ttf/Faune-Text_Regular.ttf) format("truetype"),
       url(fonts/svg/Faune-Text_Regular.svg#Faune-Text_Regular) format("svg");
  font-weight: 400;
  font-style: normal
}

Explications

Chaque @font-face donne le nom « Faune » au caractère, chaque src correspond aux fichiers sources pour les différents navigateurs (internet Explorer, Safari, Chrome, Firefox…). Le font-weight et le font-style définissent la graisse et le style des fichiers sources, cela permet d’avoir le vrai italique et la bonne graisse automatiquement.

Si vous avez réussi ce code, la font-family pourra être appliqué en CSS :

font-family: 'Faune', sans-serif;

Version moderne

Depuis quelques années les fichiers woff2 et woff sont supportés par la plupart des navigateurs, on peut donc réduire le code.

/* DEMO avec 3 styles */
 
@font-face {
  font-family: Faune;
  src: url(fonts/woff2/Faune-Display_Thin.woff2) format("woff2"), /*  <--- une virgule */ 
       url(fonts/woff/Faune-Display_Thin.woff) format("woff"); /* <--- un point virgule */
  font-weight: 100; /* ultra-light */
  font-style: normal
}
 
@font-face {
  font-family: Faune; /* toujours le nom de la famille */
  src: url(fonts/woff2/Faune-Text_Bold.woff2) format("woff2"),
       url(fonts/woff/Faune-Text_Bold.woff) format("woff");
  font-weight: 700; /* bold */ 
  font-style: normal
}
 
@font-face {
  font-family: Faune;
  src: url(fonts/woff2/Faune-Text_Italic.woff2) format("woff2"),
       url(fonts/woff/Faune-Text_Italic.woff) format("woff");
  font-weight: 400;
  font-style: italic /* Italic */
}
Attention ! Si la fonte est déjà sur votre ordinateur, un test sur celui-ci ne prouve pas un CSS correctement écrit, pensez à désactiver la police temporairement. Vérifiez deux fois que les fichiers sont dans les bons dossiers ! Testez sur une autre machine !