Comment utiliser une police personnalisée sur ton site (teste-la d’abord)

Pour utiliser une police personnalisée sur ton site, tu envoies le fichier de la police sur ton site, tu dis à ton CSS où il se trouve avec une règle @font-face, puis tu l’utilises avec font-family. Avant tout cela, tu peux tester la police sur tes vraies pages : avec l’extension gratuite FontMee, tu charges un fichier .woff2, .ttf ou .otf depuis ton ordinateur et tu le vois sur n’importe quel site en un clic, sans rien changer et sans rien envoyer.

Ce qu’est une police personnalisée

Une police personnalisée est simplement un fichier de police qui n’est ni l’une des polices que tout ordinateur a déjà, ni l’une des polices gratuites de Google Fonts. Ce peut être une police de marque faite par un designer, une police achetée ou une que tu as créée. Elle arrive en général sous la forme d’un fichier qui finit par .woff2, .woff, .ttf ou .otf. Pas encore de fichier ? Notre guide pour ajouter Google Fonts couvre les gratuites.

Pour les sites web, .woff2 est le meilleur choix : il est petit, donc les pages se chargent plus vite, et tous les navigateurs actuels savent le lire. .ttf et .otf sont les formats qu’on utilise sur un ordinateur. Ils fonctionnent aussi dans les navigateurs, mais les fichiers sont plus lourds. Si tu n’as qu’un .ttf ou un .otf, c’est très bien pour tester.

Étape 1 : Teste-la d’abord sur un vrai site

Envoyer une police et écrire du code pour découvrir ensuite qu’elle ne te plaît pas fait perdre un après-midi. FontMee est une extension Chrome gratuite, un petit module qui donne une fonction de plus à Chrome, et elle te laisse essayer des polices d’abord sur une page en direct. Elle accepte aussi tes propres fichiers. La courte vidéo montre le panneau.

1. Installe FontMee. Ajoute-la depuis le Chrome Web Store. Elle est gratuite et ne demande pas de compte. Clique sur l’icône de puzzle de Chrome et épingle-la, pour qu’elle soit toujours à un clic.
2. Ouvre une page de 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. Appuie sur Importer et choisis ton fichier de police. Tu peux en choisir plusieurs à la fois, jusqu’à 6 Mo chacun. FontMee nomme la police d’après le fichier : my_brand_sans.woff2 devient my brand sans.
4. Trouve-la sous Mes polices. Tes imports ont leur propre filtre et sont marqués À toi. Survole-en une pour la renommer avec le crayon ou la supprimer avec la corbeille.
5. Clique sur la police pour l’essayer. Sous Appliquer les changements à, choisis Tout, Titres ou Texte. Utilise Ajuster pour la taille, la graisse et l’interligne, et passe de Police d’origine à Aperçu FontMee pour comparer.
6. Saisis tes propres mots. Dans la zone de texte d’exemple, tape un vrai titre, un nom ou une phrase avec tes lettres spéciales, pour voir comment la police s’en sort.

Tes fichiers de police restent dans ton navigateur, sur ton ordinateur. Rien n’est envoyé, et le test ne change que ce que tu vois, donc personne d’autre ne s’en aperçoit. Tu veux montrer le résultat à un client ? FontMee peut faire une image avant et après : voici comment.

Étape 2 : Mets le fichier de la police sur ton site

Quand elle te plaît, la police doit vivre sur ton site, car les navigateurs de tes visiteurs ne peuvent charger que des fichiers qui sont sur internet, pas sur ton ordinateur. Crée un dossier nommé fonts et envoie-y le fichier, comme tu envoies des images : par le gestionnaire de fichiers de ton hébergement, par FTP ou par l’envoi de polices que propose peut-être ton créateur de sites. Le dossier pourrait ressembler à ceci :

your-website/
  index.html
  style.css
  fonts/
    my-brand-sans.woff2
    my-brand-sans.ttf

Utilise des noms de fichier simples, en minuscules et sans espaces (my-brand-sans.woff2, pas My Brand Sans (1).woff2). Cela évite une cause classique du « ma police ne s’affiche pas ».

Étape 3 : Dis à ton CSS que la police existe

Maintenant, tu écris deux petites choses dans ton CSS, les règles qui disent à la page comment s’afficher. D’abord un bloc @font-face, qui dit « il existe une police de ce nom, et son fichier est ici ». Puis une règle normale qui utilise la police.

@font-face {
  font-family: 'My Brand Sans';
  src: url('/fonts/my-brand-sans.woff2') format('woff2'),
       url('/fonts/my-brand-sans.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: 'My Brand Sans', sans-serif;
}

h1, h2 {
  font-family: 'My Brand Sans', serif;
}

En clair : font-family dans le premier bloc est un nom que tu inventes. src indique où se trouve le fichier, et la deuxième ligne est une solution de secours en .ttf pour les navigateurs plus anciens. font-display: swap affiche ton texte dans une police de secours jusqu’à l’arrivée de la vraie, pour que les visiteurs ne fixent jamais un espace vide. Dans les règles du bas, le mot après la virgule (sans-serif) est cette police de secours, et c’est une bonne habitude d’en mettre toujours une.

Mets ce CSS là où ton site garde ses styles : dans style.css, dans WordPress sous Apparence, Personnaliser, CSS additionnel, ou dans la zone de CSS perso de ton créateur de sites. Si ton fichier est dans un autre dossier, change le chemin dans url().

Le raccourci : laisse FontMee l’écrire

De retour dans FontMee, appuie sur Copier le CSS. Pour une police importée, FontMee écrit tes règles et ajoute un commentaire avec une ligne @font-face pour démarrer. Change le nom et l’extension du fichier s’ils diffèrent, par exemple en .ttf. Tu préfères tout prêt ? Appuie sur Télécharger le ZIP à héberger soi-même. Tu obtiens un dossier avec ton fichier de police dans fonts, un fonts.css avec le bloc @font-face, un fontmee.css avec tes règles et un court README. Envoie le dossier, lie les deux feuilles de style, et c’est fini.

Quatre vérifications avant de publier

• Vérifie la licence. Un fichier de police sur ton ordinateur n’est pas automatiquement libre d’être mis sur un site. Beaucoup de licences couvrent seulement l’usage sur ordinateur et ont une licence web à part. FontMee te le rappelle avec « ton propre fichier : vérifie sa licence avant de publier ». Dans le doute, demande où tu as eu la police.
• Vérifie tes lettres. Dans la zone d’exemple, tape des mots avec tes caractères spéciaux (é, è, ç, œ, ñ). Une police peut sembler parfaite et pourtant manquer de certaines lettres, qui apparaissent alors dans une police de secours.
• Garde une police de secours. Termine chaque font-family par serif ou sans-serif, pour que le texte reste correct pendant le chargement.
• Reste léger. Un ou deux fichiers de police suffisent largement. Chaque fichier en plus alourdit un peu la page, alors choisis .woff2 quand tu peux.

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