0Pricing
CSS Academy · Leçon

Google Fonts et @font-face

Chargez des polices externes depuis Google Fonts ou définissez des polices personnalisées avec la règle @font-face.

Google Fonts et @font-face est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.

Pourquoi utiliser des polices personnalisées ?

Les polices compatibles avec le Web n'offrent qu'un nombre limité de choix. Les polices personnalisées vous permettent de reproduire précisément l'identité d'une marque. Les deux principales approches sont Google Fonts (service hébergé) et @font-face (hébergement autonome).

Configuration de Google Fonts

Rendez-vous sur fonts.google.com, sélectionnez une famille de polices, choisissez les épaisseurs, puis copiez la balise <link> dans l'élément HTML <head> :

<p>Add these tags to your document's <code>&lt;head&gt;</code>:</p>
<pre><code>&lt;link rel="preconnect" href="https://fonts.googleapis.com"&gt;
&lt;link rel="preconnect" href="https://fonts.gstatic.com" crossorigin&gt;
&lt;link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&amp;display=swap" rel="stylesheet"&gt;</code></pre>

Utiliser Google Fonts en CSS

Après avoir ajouté le lien, référencez la police par son nom dans votre liste font-family :

<h1>Playfair Display Heading</h1>
<p>Roboto body text below the heading.</p>

Paramètres de l'API Google Fonts

Le paramètre display=swap utilise la stratégie d'affichage avec échange : le texte s'affiche immédiatement avec la police de repli, puis celle-ci est remplacée lorsque la police personnalisée est chargée. Cela évite que le texte soit invisible pendant le chargement.

Principes de base de @font-face

@font-face vous permet de charger un fichier de police personnalisé que vous hébergez vous-même. Définissez le nom de la famille de polices et la source du fichier :

<p class="brand-text">Custom brand typeface text</p>

WOFF2 : le format moderne

WOFF2 (format de police ouvert pour le Web 2) est le format recommandé. Il offre la meilleure compression (généralement 30 % plus petit que WOFF) et est pris en charge par tous les navigateurs modernes. Incluez toujours WOFF comme solution de repli.

Plusieurs épaisseurs avec @font-face

Déclarez un bloc @font-face pour chaque combinaison d'épaisseur et de style. Utilisez le même nom font-family afin que le navigateur sélectionne automatiquement le fichier approprié :

<p>Regular weight 400 text with <strong>bold weight 700 text</strong> inline.</p>

Propriété font-display

Le descripteur font-display contrôle le comportement du chargement de la police :

  • swap — afficher immédiatement la police de repli, puis la remplacer lorsqu'elle est prête (recommandé)
  • block — rendre le texte invisible pendant 3 secondes au maximum
  • fallback — appliquer un bref blocage, puis conserver définitivement la police de repli
  • optional — utiliser la police uniquement si elle est déjà mise en cache
<p class="swap-text">Text swaps in once Inter loads.</p>

Police variable avec @font-face

Les polices variables définissent des plages d'axes au lieu de valeurs d'épaisseur fixes :

<p class="variable-text">Variable weight text (550)</p>

Préchargement des polices essentielles

Préchargez votre fichier de police le plus important afin de réduire le délai qui bloque le rendu. Ajoutez un élément <link rel="preload"> avant la feuille de style :

<p>Add this to your document's <code>&lt;head&gt;</code> to preload the font file:</p>
<pre><code>&lt;link rel="preload" href="./fonts/inter.woff2" as="font" type="font/woff2" crossorigin&gt;</code></pre>

local() pour éviter le téléchargement

Utilisez local() dans src pour vérifier si la police est déjà installée sur l'appareil de l'utilisateur avant de la télécharger :

<p class="roboto-text">Uses local Roboto if installed</p>

Vérification rapide

Quel format de police offre la meilleure compression et la prise en charge la plus étendue par les navigateurs modernes ?

Récapitulatif

Google Fonts fournit facilement des polices hébergées grâce à une balise <link>. Hébergez vous-même vos polices avec @font-face en utilisant le format WOFF2 et font-display: swap pour de meilleures performances. Préchargez les polices essentielles et utilisez local() pour éviter les téléchargements inutiles.

Questions Fréquemment Posées

La leçon « Google Fonts et @font-face » est-elle gratuite ?

Oui — le texte complet de « Google Fonts et @font-face » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Google Fonts et @font-face » ?

Chargez des polices externes depuis Google Fonts ou définissez des polices personnalisées avec la règle @font-face. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer CSS Academy ?

Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Google Fonts et @font-face » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?

Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Familles de polices et polices sûres pour le web
  2. Taille, épaisseur et style des polices
  3. Alignement, décoration et espacement du texte
  4. Google Fonts et @font-face
← Retour à CSS Academy