Installer une police dans son projet

Le projet interdit les CDN : aucune ressource ne doit être chargée depuis un serveur extérieur. Ça vaut pour les images, et ça vaut pour les polices. La ligne que Google Fonts propose par défaut est donc à proscrire :

<!-- ❌ Interdit : la police est chargée depuis les serveurs de Google -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat" rel="stylesheet">

Pourquoi cette règle

Un site dont les polices viennent d'un serveur extérieur ne fonctionne plus si ce serveur tombe, s'il est bloqué, ou si le visiteur n'a pas de connexion. Et chaque visite est signalée à ce serveur. Une police installée dans ton dépôt t'appartient : ton site reste complet, et personne d'autre n'est prévenu quand on le consulte.

L'outil : google-webfonts-helper

gwfh.mranftl.com/fonts prend n'importe quelle police de Google Fonts et te rend les fichiers à télécharger plus le CSS tout prêt.

1. Choisir la police

Cherche-la dans la liste de gauche — Montserrat, Roboto, Open Sans, celle que tu as choisie pour ton projet.

2. Choisir les graisses

Regular 400 suffit. Ajoute 700 seulement si tu veux du gras. Chaque graisse cochée est un fichier de plus à télécharger pour tes visiteurs : n'en prends pas dix.

3. Télécharger les fichiers

Bouton Download files : tu obtiens un zip. Extrais les fichiers .woff2 dans un dossier fonts/ à la racine de ton projet, à côté de img/.

mon-projet/
├── index.html
├── style.css
├── img/
└── fonts/
    └── montserrat-v29-latin-regular.woff2

4. Copier le CSS

Dans la section Copy CSS, choisis l'option Modern Browsers, puis colle le résultat tout en haut de ton style.css — avant tes autres règles.

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/montserrat-v29-latin-regular.woff2') format('woff2');
}

body {
    font-family: 'Montserrat', sans-serif;
}

Le nom du fichier contient un numéro de version (v29 ci-dessus) : recopie celui que tu as vraiment dans ton dossier, pas celui de cet exemple.

Les deux erreurs qui reviennent toujours

Le chemin. url('fonts/…') part du dossier où se trouve style.css. Si ton CSS est à la racine et tes polices dans fonts/, c'est bon. Si la police ne s'applique pas, ouvre la console (F12) : une erreur 404 sur le .woff2 veut dire que le chemin est faux.

Le fichier oublié. Le .woff2 doit être commité et poussé comme n'importe quel autre fichier. Sinon la police marche sur ton ordinateur et pas en ligne — exactement le même piège que les images.

Vérifier que ça marche

1. Ouvre ta page en ligne, pas seulement en local.
2. F12 → onglet Réseau, recharge : le fichier .woff2 doit apparaître avec un statut 200, et son adresse doit commencer par la tienne (ton-compte.github.io), jamais par fonts.gstatic.com.
3. Cherche fonts.googleapis.com dans tout ton projet (Ctrl + Maj + F dans WebStorm) : il ne doit rester aucune occurrence.

Pas d'obligation d'installer une police

Une police système est un choix parfaitement valable, gratuit en poids et en complexité :

body {
    font-family: Georgia, serif;
}

Georgia, system-ui, Verdana, Times New Roman sont installées sur toutes les machines. Elles ne coûtent aucun point — une police téléchargée mal installée, si.

Autres solutions

google-webfonts-helper ne connaît que les polices de Google Fonts. Voici d'autres sources sérieuses, où l'on télécharge de vrais fichiers à déposer dans son projet — pas un lien à coller.

Site	Ce qu'on y trouve
Google Fonts	Le catalogue d'origine. Bouton Get font, puis Download all : tu obtiens les fichiers. C'est plus manuel que gwfh, qui te donne en plus le CSS.
Fontsource	Les polices open source empaquetées pour être hébergées chez soi, fichiers et CSS fournis.
Fontshare	Le catalogue gratuit de l'Indian Type Foundry. Des polices de qualité professionnelle, avec un kit à télécharger pour l'auto-hébergement.
Font Squirrel	Une sélection de polices utilisables commercialement, avec des pictogrammes qui indiquent les usages autorisés.
Velvetyne	Fonderie libre française : des caractères originaux, loin des polices qu'on voit partout.
The League of Moveable Type	Une poignée de polices open source, toutes soignées.

« Gratuit » ne veut pas dire « utilisable »

Beaucoup de sites de polices — DaFont en tête — mélangent des polices libres et des polices marquées « free for personal use ». Celles-là ne s'utilisent pas sur un site web, même sans but commercial : ton projet est publié, donc visible par tout le monde.

Avant de télécharger, trouve la licence sur la page de la police et pose-toi trois questions :

1. La licence est-elle nommée ? SIL Open Font License (OFL) est la plus courante côté libre : elle autorise l'utilisation, la modification et la redistribution, tant que la police n'est pas revendue seule. Si aucune licence n'est indiquée, passe ton chemin.
2. L'usage sur un site web est-il autorisé ? Certaines licences couvrent l'impression mais pas le web. Les termes à chercher : webfont, @font-face, web embedding.
3. As-tu le droit d'héberger le fichier toi-même ? C'est ce que demande le projet, puisque les CDN sont interdits. Fontshare, par exemple, autorise explicitement l'auto-hébergement.

En cas de doute, garde une police système : c'est gratuit, immédiat et sans question de droits.

Ce que ça t'apprend au-delà du cours

Une police est un logiciel, avec un auteur et une licence — comme une image ou un morceau de musique. Un designer y a passé des mois. Vérifier une licence avant de se servir, c'est le même réflexe que citer ses sources : ça prend deux minutes et ça évite les ennuis.