Intégrer une police particulière à votre site

,

Trouver sa police

Par convention, le web utilise les polices suivantes :

—SERIF—

—SANS-SERIF—

—CURSIVE—

—MONOSPACE—

Mais vous pouvez utiliser la police que vous souhaitez sur votre site web tant que cela est cohérent avec votre thème.

Pour trouver une police, vous pouvez récupérer celle-ci sur votre ordinateur, elle se situe généralement dans un dossier nommés « fonts » sur votre ordinateur ou en télécharger directement sur le web. Voici une liste de sites où vous pourrez récupérer des polices d’écritures :

Sachez toutefois que de nombreuses polices sont soumis à des droits d’auteurs et/ou des limites d’utilisation, vous êtes donc responsable de leur utilisation sur votre site.

L’adapter au contenu web

Il faut savoir que nos différents navigateurs ont presque tous choisis des formats différents, du coup il faut préparer la police pour que chacun d’entre eux puisse la lire, vous allez pouvoir gérer ceci grâce à  Fontsquirrel.

Il suffit de cliquer sur « add fonts », de sélectionner le fichier de la police que l’on a précédemment téléchargé et dézippé, de choisir une version « expert »et de télécharger le tout. Un nouveau dossier zippé est alors sur votre ordinateur, il faut en extraire les fichiers pour les ajouter dans votre dossier « font » précédemment créé.

2016-10-14-09-33-59_clipboard

Dans votre code CSS, vous allez devoir recopier ce morceau de code pour pouvoir l’intégrer à votre site et l’appliquer aux titres, à des éléments widget, au pied de page … Il ne reste plus qu’a spécifier où chaque police doit apparaître : p, body, title, footer …

[pastacode lang= »css » manual= »%40font-face%20%7B%0Afont-family%3A%20’police’%3B%0Asrc%3A%20url(‘font%2Fpolice.eot’)%3B%20%0Asrc%3A%20url(‘font%2Fpolice.eot%3F%23iefix’)%20format(’embedded-opentype’)%2C%20%0Aurl(‘font%2Fpolice.woff2’)%20format(‘woff2’)%2C%20%0Aurl(‘font%2Fpolice.woff’)%20format(‘woff’)%2C%20%0Aurl(‘font%2Fpolice.ttf’)%20format(‘truetype’)%2C%20%0Aurl(‘font%2Fpolice.svg%23svgwpf’)%20format(‘svg’)%3B%20%0A%7D » message= » » highlight= » » provider= »manual »/]