Ajout de Polices Personnalisées à une Page Web
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 toujours important de respecter les droits d'auteur.
Service Google Fonts
De nombreuses polices intéressantes sont disponibles gratuitement. Examen des options proposées par https://fonts.google.com/. L'ajout d'une police Google à la structure HTML est simple.
Dans un premier temps, exécution de 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).
index.html
styles.css
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 https://fonts.google.com/.
Dans le champ de saisie "Search fonts", saisir le nom de la police souhaitée. Dans ce cas, il s’agit de "DM Sans". Une fois affichée, cliquer sur la carte de "DM Sans".
Sur la page de la police, cliquer sur le bouton "Get font".
Ensuite, cliquez sur le bouton « Obtenir le code d'intégration ».
Enfin, copiez le lien et collez-le dans le fichier HTML de votre projet à l'intérieur de l'élément <head>. Il est important d'insérer le lien avant celui de 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. Vérifions maintenant le projet pour s'assurer que tout fonctionne correctement.
index.html
styles.css
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.
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
How do I add a Google Font to my HTML file?
What is the purpose of the preconnect links in the head section?
Can you explain the difference between default and custom fonts?
Génial!
Completion taux amélioré à 2.56Ajout de Polices Personnalisées à une Page Web
Glissez pour afficher le menu
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 toujours important de respecter les droits d'auteur.
Service Google Fonts
De nombreuses polices intéressantes sont disponibles gratuitement. Examen des options proposées par https://fonts.google.com/. L'ajout d'une police Google à la structure HTML est simple.
Dans un premier temps, exécution de 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).
index.html
styles.css
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 https://fonts.google.com/.
Dans le champ de saisie "Search fonts", saisir le nom de la police souhaitée. Dans ce cas, il s’agit de "DM Sans". Une fois affichée, cliquer sur la carte de "DM Sans".
Sur la page de la police, cliquer sur le bouton "Get font".
Ensuite, cliquez sur le bouton « Obtenir le code d'intégration ».
Enfin, copiez le lien et collez-le dans le fichier HTML de votre projet à l'intérieur de l'élément <head>. Il est important d'insérer le lien avant celui de 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. Vérifions maintenant le projet pour s'assurer que tout fonctionne correctement.
index.html
styles.css
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.
Merci pour vos commentaires !
