Aller au contenu

Polices Web Google Fonts

Il existe des milliers de polices en ligne qui nous permettent de modifier l'apparence du texte de nos sites web et les rendre plus intéressants.

Dans le passé, nous étions limités par les polices installées avec les systèmes d'exploitation. Si on n'utilisait pas des polices de base, on risquait que notre site web ne s'affiche pas correctement.

De nos jours, avec les polices web - hébergées sur un serveur - les polices plus stylisées deviennent accessibles et utilisables sans que l'utilisateur n'ait à installer quoi que ce soit. Les polices web deviennent une ressource comme une feuille CSS.

Google Fonts

Google Fonts est un bibliothèque contenant des centaines de polices de caractères pouvant être intégrées sur une page web. Ceci devient intéressant quand les polices de base du système d'exploitation ne conviennent pas à notre style ou notre marque de commerce. De plus, ces polices sont libres de droits d'auteur, donc sans tracas!

Attention

Les polices Google Fonts sont soit hébergées localement sur notre serveur web, soit hébergées sur un serveur de Google.

Plus on ajoute de polices hébergées chez Google, plus notre site sera lent, car les polices devront être chargées à distance lors de l'affichage des pages de votre site!

Option 1 : Télécharger les polices dans son projet

Pour télécharger les polices dans son projet :

  1. Rendez-vous sur le site de Google Fonts, puis :

  2. Cliquer sur la police voulue.

  3. Cliquer sur le bouton Get Font au haut de la page

    Fonts

    ➡️ Répéter au besoin pour ajouter autant de polices que désiré

  4. Cliquer sur Download all

  5. Dans votre dossier CSS de votre projet web, créer un nouveau dossier nommé "polices" ou "fonts"

    NOTE: on crée le dossier de polices dans CSS, puisque ce sont les feuilles de styles qui vont utiliser les nouvelles polices.

    Fonts

  6. Dans les fichiers téléchargés, extraire le fichier de police ayant l'extension .ttf

    Copier le fichier .ttf dans le nouveau dossier de polices de votre projet

    Fonts

Pour appliquer les nouvelles polices dans le CSS :

  1. Au tout début de la feuille de style qui va appliquer la police, indiquer l'existence de la police au projet :

    @font-face {
    font-family: "Protest Guerrilla";
    src: url(polices/ProtestGuerrilla-Regular.ttf);
}
    • font-family: le nom de la police
    • src: le chemin d'accès vers le fichier de police

  2. Dans la feuille de styles, appliquer la police à l'endroit désiré

    • Sur la page Google Fonts, vous avez un exemple d'appel à la police choisie avec le bouton Get embed code :

      Fonts

    • Dans le CSS, voici un exemple d'utilisation :

    h2{
    color: white;
    font-family: "Protest Guerrilla", sans-serif;
}

Option 2 : Utiliser des polices en ligne

Pour utiliser les polices en ligne hébergées chez Google :

  1. Rendez-vous sur le site de Google Fonts, puis :

  2. Cliquer sur la police voulue.

  3. Cliquer sur le bouton Get Font au haut de la page

    Fonts

  4. Cliquer sur le bouton Get embed code

  5. Dans le <head> de votre HTML, ajouter les liens vers Google Fonts :

    Fonts

  6. Dans le CSS, utiliser la famille de police tel que l'exemple fourni par Google :

    Fonts