Police - fonts

Polices originales : Faites vous remarquer

L’un des moyens pour se distinguer des autres sites internet, hormis le contenu, le graphisme, c’est la police, autrement dit la typographie de vos textes.

Vous avez de base accès à un nombre assez limité de police : Arial, Verdana, Tahoma… Comment faire ?

À l’instar des droits d’images, des droits d’auteurs, il existe des droits sur les polices. Vous trouverez ci-dessous des sites où vous trouverez uniquement des polices libres de droits, c’est-à-dire qui seront réutilisables gratuitement sur votre site.

Font squirrel

https://www.fontsquirrel.com/

Sur le menu du haut :

  • “ Test Drive” permet de visualiser la police en fonction de ce que vous aurez tapé.
  • “Character Map” permet de visualiser l’ensemble des caractères supportés. Il faut faire en effet attention, certaines polices ne sont pas adaptés aux langues latines avec les “é”, “à”…
  • “@font-face Kit”’ permet de télécharger le kit d’installation.

Comment installer cette police sur son site ?

Après avoir choisi votre police, téléchargez le @font-face Kit sur votre ordinateur puis suivez les étapes suivantes :

  1. Extraire le fichier
  2. Recopier le contenu présent dans le fichier “stylesheet” et coller le dans le fichier css de votre propre site.
    Faites attention à rectifier les URL de destinations des fichiers de police (eot/woff/ttf)
    Ex: src:url(‘DearestRegular.eot’) a remplacé par src:url(‘font/DearestRegular.eot’) si vous allez mettre vos fichiers polices dans un dossier font
  3. Déplacer les fichiers de police à l’emplacement mentionné dans vos css
  4. C’est prêt. Vous n’avez plus qu’à utiliser votre nouvelle police comme une police classique Arial par exemple.

Google web fonts

https://fonts.google.com/

fonts google pour le web

Google propose près de 500 polices différentes et l’intégration est simplifiée puisque vous n’avez pas à télécharger les polices, elles sont directement stockées chez Google.

Vous pouvez dans le menu du haut visualiser les polices en fonction d’un mot, d’un texte ou d’un paragraphe que vous aurez au préalable tapé.

Cliquez sur le bouton “Add to Collection” pour rajouter une police à votre sélection. En cliquant sur “Pop Out”, vous pourrez visualiser l’ensemble des caractères supportés.

Il faut faire en effet attention, certaines polices ne sont pas adaptées aux langues latines avec les “é”, “à”…

Lorsque vous avez terminé, cliquez tout en bas dans la barre bleue sur “Use”.

Comment mettre cette police sur son site ?

Choisissez si vous souhaitez ajouter la police en gras en cochant les différentes cases.
Il vous suffit maintenant plus que de copier le code de l’étape 3 “Add this code to your website” et de le coller sur votre site entre les balises head

C’est prêt vous n’avez plus qu’à utiliser votre nouvelle police comme une police classique Arial par exemple.

A vous de jouer

Elie-Sara Couttet

Passionnée de nouvelles technos et des dernières news sur le web, j’aime apprendre et comprendre pour pouvoir vous transmettre !