Comment ajouter Google Fonts à ton site (3 façons simples)

Pour ajouter une police Google à ton site, il y a deux petites tâches : charger la police, puis dire à ton texte de l’utiliser. Tu peux la charger avec une balise <link> dans l’en-tête (le head) de ta page, avec une ligne @import tout en haut de ton CSS, ou à partir de fichiers de police que tu héberges toi-même. Le plus rapide pour obtenir les lignes exactes, c’est l’extension gratuite FontMee : tu essaies la police sur ton propre site, tu appuies sur Copier le CSS et tu colles. Voici les trois façons, avec du code à copier tel quel.

Ce que « ajouter une police » veut vraiment dire

Imagine une police comme un invité à un dîner. D’abord, il faut l’inviter, c’est-à-dire que ta page doit télécharger le fichier de la police. Ensuite, il faut lui donner une place, c’est-à-dire dire à ton texte de l’utiliser. Si tu oublies l’invitation, la police ne vient jamais. Si tu oublies la place, elle reste dans son coin pendant que ton texte garde sa vieille police.

Les deux tâches s’écrivent en CSS, l’ensemble de règles de style qui dit à un site à quoi ressembler. L’invitation va dans le head de ta page (une zone cachée tout en haut du HTML où le navigateur lit ses consignes) ou tout en haut de ton fichier CSS. La place à table, c’est une petite règle, comme celle des exemples ci-dessous. Quelle que soit la façon choisie, ces deux tâches restent les mêmes.

Façon 1 : une balise link dans le head de ta page

C’est la méthode que Google montre sur son propre site. Tu mets trois lignes dans le head de ta page : deux qui disent au navigateur de se préparer à se connecter à Google, et une qui charge la police. Elle se charge en général un peu plus tôt que les autres façons, parce que le navigateur peut commencer à récupérer la police avant même d’avoir lu ton CSS.

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap">
  <style>
    h1, h2 { font-family: 'Lora', serif; }
  </style>
</head>

Le dernier bout du lien, display=swap, dit au navigateur d’afficher tout de suite ton texte dans une police de secours et de la remplacer par la vraie dès qu’elle arrive, pour que les visiteurs ne regardent jamais un vide. Le mot après la virgule dans ta règle (serif) est cette police de secours, et Google conseille d’en mettre toujours une. Utilise cette façon quand tu peux modifier le HTML de ta page.

Façon 2 : une ligne @import tout en haut de ton CSS

Parfois, tu ne peux pas toucher au head de la page, seulement au CSS. C’est le cas avec la zone « CSS additionnel » de WordPress, la section CSS de nombreux créateurs de sites ou un simple fichier style.css. L’invitation peut alors vivre dans ton CSS, en une ligne qui doit se trouver tout en haut, avant toute autre règle.

@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap');

h1, h2 { font-family: 'Lora', serif; }

C’est la plus simple à coller, mais elle est en général un poil plus lente que la balise link, parce que le navigateur ne découvre la police qu’après avoir lu ton CSS. Sur un petit site, tu ne le verras presque pas.

Façon 3 : héberger toi-même les fichiers de la police

Ici, tu télécharges les fichiers de la police chez Google, tu les mets sur ton propre site et tu pointes vers eux, si bien que les navigateurs de tes visiteurs ne contactent jamais Google. Certains choisissent ça pour la vie privée, d’autres pour la vitesse, et d’autres parce que les règles diffèrent d’un pays à l’autre, alors vérifie ce qui s’applique à tes visiteurs. Il y a quelques étapes de plus, mais rien de difficile : tu copies un dossier, puis tu ajoutes une règle qui dit où se trouve le fichier.

@font-face {
  font-family: 'Lora';
  src: url('fonts/lora-latin-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

h1, h2 { font-family: 'Lora', serif; }

Les polices Google Fonts sont open source, tu peux donc les télécharger et les héberger, y compris pour des projets commerciaux. Le long, c’est de trouver et télécharger chaque fichier et d’écrire chaque bloc @font-face à la main. FontMee le fait pour toi, comme tu vas le voir.

Quelle façon choisir ?

• Tu peux modifier le HTML de ta page : utilise la balise link (façon 1).
• Tu ne peux modifier que le CSS, ou tu utilises un créateur de sites avec une zone CSS : utilise @import (façon 2).
• Tu veux que les navigateurs de tes visiteurs chargent tout depuis ton propre serveur : héberge les fichiers (façon 3).

Pas sûr ? Commence par la façon 1 ou 2. Tu pourras changer plus tard, et seule la ligne qui charge la police change.

Obtiens le code exact avec FontMee

Taper ces lignes à la main, c’est là que se font la plupart des erreurs : un signe plus oublié, une graisse que la police n’a pas, une règle qui ne correspond pas à tes titres. FontMee est une extension Chrome gratuite, un petit module qui donne une nouvelle fonction au navigateur, et elle écrit les lignes pour toi. Tu essaies d’abord une police sur ton vrai site, tu vois le rendu, puis tu copies le code pour ce choix précis. Elle propose plus de 1 900 polices, et la vidéo montre le panneau en action.

1. Installe FontMee. Ajoute-la depuis le Chrome Web Store. Elle est gratuite et sans compte. Clique sur l’icône puzzle de Chrome et épingle-la, comme ça elle est toujours à un clic.
2. Ouvre ton site et clique sur l’icône FontMee. Le panneau s’ouvre à côté de la page. Tu peux aussi appuyer sur Alt + Shift + F. Les pages propres à Chrome (nouvel onglet, le Web Store, les pages chrome://) ne peuvent pas être modifiées.
3. Choisis où va la police. Sous Appliquer les changements à, choisis Tout, Titres ou Texte, puis clique sur une police. Tu peux faire les titres et le texte séparément.
4. Vérifie sur la vraie page. Passe de Police d’origine à Aperçu FontMee, et utilise Ajuster pour la taille, la graisse et l’interligne jusqu’à ce que ce soit bon.
5. Appuie sur Copier le CSS. Une fenêtre s’ouvre avec quatre onglets : CSS (la façon @import), HTML (la façon balise link), Variables et Tailwind pour ceux qui les utilisent. Choisis l’onglet qui correspond à ta façon, appuie sur Copier dans le presse-papiers et colle dans ton site. FontMee ne demande à Google que les graisses que la police a vraiment, tu n’obtiens donc pas un lien cassé.
6. Tu veux la façon 3 ? Dans la même fenêtre, appuie sur Télécharger le ZIP à héberger soi-même. Tu obtiens un dossier avec les fichiers de la police, un fonts.css, un fontmee.css et un court README. Envoie le dossier sur ton site et ajoute les deux liens vers les feuilles de style.

Quatre choses à vérifier avant de publier

• Ne charge que ce que tu utilises. Chaque police et chaque graisse en plus alourdit un peu ta page. Deux polices et deux graisses suffisent pour la plupart des sites.
• Garde une police de secours. Termine chaque font-family par un nom générique comme serif ou sans-serif, pour que le texte reste correct pendant le chargement.
• Vérifie les lettres dont tu as besoin. Les accents comme é, ç ou ş, et les lettres cyrilliques ou vietnamiennes, ne sont pas dans toutes les polices. Prévisualise tes propres mots dans FontMee avant de copier.
• Vérifie la licence. Les Google Fonts sont open source et libres pour un usage commercial. La fenêtre de code de FontMee liste la licence de chaque police, tu peux donc la voir avant de publier.

Pas encore de site ? Alors la police passe en second. Un site a aussi besoin d’une maison où vivre, et un créateur de sites est le moyen le plus rapide d’en avoir une sans code.

Récupère l’extension

FontMee est gratuite, avec plus de 1 900 polices, Copier le CSS en quatre formats, un ZIP à héberger soi-même et l’import de tes propres polices. Sans compte, sans abonnement. Ajoute-la depuis le Chrome Web Store, ou lis d’abord la page FontMee.

Bon à savoir avant de commencer

FAQ