> Fontes, polices personnalisées @font-face

Pour utiliser des fontes ou polices personnalisées il existe différentes possibilités, j’ai choisi “@font-face”.
Attention, ce n’est pas très facile à mettre en place.

Les fontes @font-face ont l’avantage de pouvoir être déclinées dans les 4 formats lisibles par les principaux navigateurs :

  • TrueType Fonts for Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
  • EOT fonts for Internet Explorer 4+
  • WOFF fonts for Firefox 3.6+, Internet Explorer 9+, Chrome 5+
  • SVG fonts for iPad and iPhone

Comment mettre ça en place :

1 – D’abord ou trouver un kit de fontes @font-face, allez voir à cette adresse: http://www.fontsquirrel.com/fontface ce site propose des kits à télécharger prêts à être utilisés (contrôlez la licence d’utilisation).

2 – Une fois votre kit téléchargé, par ftp créez un dossier fonte au premier niveau de votre hébergement WordPress et mettez-y les 4 formats de fontes téléchargés dedans (exemple : Cuprum-webfont.eot, Cuprum-webfont.svg, Cuprum-webfont.ttf, Cuprum-webfont.woff).

3 – Faire reconnaître la fonte ou les fontes par les navigateurs :
dans la feuille de style de votre thème, passez les lignes ci-dessous après l’en-tête de votre feuille de style:

/* -- insertion fontes perso (@font-face) -------------------- */
    @font-face{
    font-family: LeNomQueVousVoulez;
    src : url('https://www.VotreSite.com/fontes/NomDeLaFonte.eot?') format('eot'),
          url('https://www.VotreSite.com/fontes/NomDeLaFonte.woff') format('woff'),
          url('https://www.VotreSite.com/fontes/NomDeLaFonte.svg#abcd') format('svg'),
          url('https://www.VotreSite.com/fontes/NomDeLaFonte.ttf') format('truetype'),
          url('https://www.VotreSite.com/fontes/NomDeLaFonte.eot') format('eot');
}
/* -------- Fin d'insertion de fontes --------------------------- */

Après “font-family:” vous mettez le nom que vous voulez, par exemple “Fontes-Titres” si cette fonte doit être utilisée pour les titres.
Pour les url mettez l’adresse de votre site et le nom de la fonte téléchargée pour chaque ligne.

Dans le cas de plusieurs fontes utilisées voir ci-dessous:

/* -- insertion fontes perso (@font-face) -------------------- */
    @font-face{
    font-family: LeNomQueVousVoulez;
    src : url('https://www.VotreSite.com/fontes/NomDeLaFonte1.eot?') format('eot'),
          url('https://www.VotreSite.com/fontes/NomDeLaFonte1.woff') format('woff'),
          url('https://www.VotreSite.com/fontes/NomDeLaFonte1.svg#abcd') format('svg'),
          url('https://www.VotreSite.com/fontes/NomDeLaFonte1.ttf') format('truetype'),
          url('https://www.VotreSite.com/fontes/NomDeLaFonte1.eot') format('eot');
}

    @font-face{
    font-family: LeNomQueVousVoulez;
    src : url('https://www.VotreSite.com/fontes/NomDeLaFonte2.eot?') format('eot'),
          url('https://www.VotreSite.com/fontes/NomDeLaFonte2.woff') format('woff'),
          url('https://www.VotreSite.com/fontes/NomDeLaFonte2.svg#abcd') format('svg'),
          url('https://www.VotreSite.com/fontes/NomDeLaFonte2.ttf') format('truetype'),
          url('https://www.VotreSite.com/fontes/NomDeLaFonte2.eot') format('eot');
}
/* -------- Fin d'insertion de fontes --------------------------- */

Sur l’exemple ci-dessus, j’utilise 2 fontes, après “font-family:” du premier bloc vous mettez le nom que vous voulez, par exemple “Fonte-Header” si cette fonte doit être utilisée pour le Header et après “font-family:” du deuxième bloc vous mettez le nom que vous voulez, différent du premier bien sûr, par exemple “Fonte-Titres” si cette fonte doit être utilisée pour les Titres, il faut déclarer chaque fonte de cette façon, même les déclinaisons Light, Bold, Regular, Regular italique, etc.

4 – Enfin dans la feuille de style de votre thème modifiez l’appelle des fontes avec le ou les noms choisis.
Par exemple si vous avez choisi Fontes-Titres comme nom de fonte:

   font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
   font-size: 13px;

devient:

   font-family: Fonte-Titres, "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
   font-size: 13px;

Attention, pensez à mettre le nom entre guillemets si vous avez mis des espaces dans le nom.

Pour infos:
Le format de fonte .eot? sert à tromper Explorer et permet la lecture des fontes sur les versions plus anciennes d’Explorer.
L’ordre d’appel des fontes,  1: eot? – 2: woff – 3: ttf – 4: svg – 5: eot, est celui qui, pour moi, donne le meilleur résultat.

Pour approfondir le sujet, un site à consulter: typographisme.net