Summary  
This chapter explains how to integrate custom web fonts by adding HTML <link> tags to fetch font resources (with preconnect and CORS considerations) and then applying them in CSS using font-family stacks and fallbacks to ensure consistent, performant typography.

General domain of usage  
Front-end web development

Learn how to add custom fonts to your website using Google Fonts. This video demonstrates how to select a font, embed it in your HTML, and apply it using CSS. You'll see the difference between default and custom fonts, and understand why proper font loading order is important for your site's appearance. Use simple css examples. Do not provide full html document stucture. Focus on css mainly

Les polices influencent fortement l'apparence et l'atmosphère d'un site web. Une typographie de qualité améliore la lisibilité et rend un design plus mémorable. De nombreuses polices sont gratuites, tandis que d'autres nécessitent une licence ; il est essentiel de toujours respecter les droits d'auteur.

## Service Google Fonts
De nombreuses polices attrayantes sont disponibles en utilisation gratuite. Explorons les options proposées par <a href="https://fonts.google.com/" target="_blank"><svg width="1em" height="1em" viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M17.289 17.305v0c-1.754 1.754-4.597 1.754-6.351 0l-7.76-7.759c-1.755-1.755-1.755-4.601 0-6.356v0c1.753-1.753 4.595-1.756 6.351-0.005l6.208 6.187"></path><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M12.504 13.97v0c1.754-1.754 4.597-1.754 6.351 0l7.762 7.762c1.754 1.754 1.754 4.597 0 6.351v0c-1.754 1.754-4.597 1.754-6.351 0l-5.953-5.953"></path></svg> https://fonts.google.com/</a>. Il est simple d’ajouter une police Google dans le balisage.

Commençons par exécuter l’exemple suivant, qui utilise la police par défaut. L’élément `p` possède les propriétés suivantes : `font-family` (nom de la police), `font-size` (taille de la police) et `font-weight` (épaisseur de la police).

PCFkb2N0eXBlIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0ic3R5bGVzLmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8cD4KICAgICAgQnVpbGRpbmcgZ3JlYXQgZXhwZXJpZW5jZXMgdGFrZXMgdGltZSwgY2xhcml0eSwgYW5kIGZvY3VzLiBUaGlzIHNwYWNlIGlzCiAgICAgIHJlc2VydmVkIGZvciBmdXR1cmUgY29udGVudCB0aGF0IHdpbGwgZ3VpZGUsIGluZm9ybSwgb3IgaW5zcGlyZS4gV2hldGhlcgogICAgICBpdCdzIGEgc3RvcnksIGEgcHJvZHVjdCBkZXNjcmlwdGlvbiwgb3IgYSBtZXNzYWdlIHRvIHlvdXIgYXVkaWVuY2UgLSBldmVyeQogICAgICB3b3JkIGhlcmUgd2lsbCBtYXR0ZXIuCiAgICA8L3A+CiAgICA8cD4KICAgICAgVW50aWwgdGhlbiwgdGhpbmsgb2YgdGhpcyBhcyBhIHF1aWV0IHBsYWNlaG9sZGVyLiBTb21ldGhpbmcgc2ltcGxlLgogICAgICBTb21ldGhpbmcgd2FpdGluZyB0byBiZWNvbWUgbWVhbmluZ2Z1bC4KICAgIDwvcD4KICA8L2JvZHk+CjwvaHRtbD4=

cCB7CiAgZm9udC1mYW1pbHk6ICdETSBTYW5zJzsKICBmb250LXNpemU6IDI0cHg7CiAgZm9udC13ZWlnaHQ6IDQwMDsKfQ==

La propriété font-family ne fonctionne pas car notre projet n’a pas encore connaissance de la police personnalisée « DM Sans ». Ajoutons cette police au projet en utilisant <a href="https://fonts.google.com/" target="_blank"><svg width="1em" height="1em" viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M17.289 17.305v0c-1.754 1.754-4.597 1.754-6.351 0l-7.76-7.759c-1.755-1.755-1.755-4.601 0-6.356v0c1.753-1.753 4.595-1.756 6.351-0.005l6.208 6.187"></path><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M12.504 13.97v0c1.754-1.754 4.597-1.754 6.351 0l7.762 7.762c1.754 1.754 1.754 4.597 0 6.351v0c-1.754 1.754-4.597 1.754-6.351 0l-5.953-5.953"></path></svg> https://fonts.google.com/</a>.

Cliquez sur l’image pour voir les détails plus clairement.

Dans le champ de saisie « Search fonts », saisissez le nom de la police souhaitée. Dans ce cas, il s’agit de « DM Sans ». Une fois affichée, cliquez sur la carte de « DM Sans ».

Sur la page de la police, cliquer sur le bouton « Obtenir la police ».

Ensuite, cliquer sur le bouton « Obtenir le code d'intégration ».

Enfin, copier le lien et le coller dans le fichier HTML de votre projet à l'intérieur de l'élément `<head>`. Il est important d'insérer le lien **avant** le lien vers vos styles personnalisés. Cela garantit que le navigateur chargera d'abord les polices personnalisées avant d'appliquer les styles qui les utilisent. Une fois le lien ajouté, « DM Sans » sera disponible comme police personnalisée pour votre projet. Maintenant, exécuter le projet pour vérifier que tout fonctionne correctement.

PCFkb2N0eXBlIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0icHJlY29ubmVjdCIgaHJlZj0iaHR0cHM6Ly9mb250cy5nb29nbGVhcGlzLmNvbSIgLz4KICAgIDxsaW5rIHJlbD0icHJlY29ubmVjdCIgaHJlZj0iaHR0cHM6Ly9mb250cy5nc3RhdGljLmNvbSIgY3Jvc3NvcmlnaW4gLz4KICAgIDxsaW5rCiAgICAgIGhyZWY9Imh0dHBzOi8vZm9udHMuZ29vZ2xlYXBpcy5jb20vY3NzMj9mYW1pbHk9RE0rU2FuczppdGFsLG9wc3osd2dodEAwLDkuLjQwLDEwMC4uMTAwMDsxLDkuLjQwLDEwMC4uMTAwMCZkaXNwbGF5PXN3YXAiCiAgICAgIHJlbD0ic3R5bGVzaGVldCIKICAgIC8+CiAgICA8bGluayByZWw9InN0eWxlc2hlZXQiIGhyZWY9InN0eWxlcy5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPHA+CiAgICAgIEJ1aWxkaW5nIGdyZWF0IGV4cGVyaWVuY2VzIHRha2VzIHRpbWUsIGNsYXJpdHksIGFuZCBmb2N1cy4gVGhpcyBzcGFjZSBpcwogICAgICByZXNlcnZlZCBmb3IgZnV0dXJlIGNvbnRlbnQgdGhhdCB3aWxsIGd1aWRlLCBpbmZvcm0sIG9yIGluc3BpcmUuIFdoZXRoZXIKICAgICAgaXQncyBhIHN0b3J5LCBhIHByb2R1Y3QgZGVzY3JpcHRpb24sIG9yIGEgbWVzc2FnZSB0byB5b3VyIGF1ZGllbmNlIC0gZXZlcnkKICAgICAgd29yZCBoZXJlIHdpbGwgbWF0dGVyLgogICAgPC9wPgogICAgPHA+CiAgICAgIFVudGlsIHRoZW4sIHRoaW5rIG9mIHRoaXMgYXMgYSBxdWlldCBwbGFjZWhvbGRlci4gU29tZXRoaW5nIHNpbXBsZS4KICAgICAgU29tZXRoaW5nIHdhaXRpbmcgdG8gYmVjb21lIG1lYW5pbmdmdWwuCiAgICA8L3A+CiAgPC9ib2R5Pgo8L2h0bWw+

Nous pouvons observer la différence entre la **police personnalisée** et la **police par défaut**. De plus, chaque navigateur possède ses propres polices par défaut. Ainsi, il est essentiel de savoir comment utiliser des polices personnalisées sur un site web.

Maîtrisez les bases de CSS, le langage de style qui transforme l’apparence des pages web. Explorez les concepts fondamentaux tels que les styles de texte, les couleurs, l’espacement, le modèle de boîte, Flexbox et les effets décoratifs. Développez les compétences nécessaires pour créer des pages web visuellement attrayantes et bien structurées.

Comprendre comment CSS se connecte à HTML et comment les styles sont appliqués via les sélecteurs. Appliquer des couleurs, des styles de texte et des effets au survol pour contrôler la présentation visuelle.

Amélioration de la typographie à l'aide de la hauteur de ligne, de l'espacement, des propriétés de police et des polices personnalisées. Contrôle des familles de polices, du poids, du style et de la taille pour une meilleure lisibilité.

Contrôle de la structure de la mise en page à l'aide des propriétés de marge, de remplissage, de bordure et de largeur. Compréhension du comportement de dimensionnement des boîtes et des types d'affichage des éléments tels que bloc, en ligne et en ligne-bloc.

Contrôle des mises en page horizontales et verticales à l'aide des propriétés Flexbox. Ajustement de la direction, de l'alignement et de l'espacement pour structurer les composants de l'interface utilisateur.

Amélioration des mises en page à l'aide de couleurs d'arrière-plan, d'images, de pseudo-éléments et d'ombres. Mise en forme des composants visuels pour la profondeur et le contraste.

Ajout de Polices Personnalisées

Service Google Fonts