Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Ajout de Polices Personnalisées à une Page Web | Mise en Forme du Texte en CSS
Fondamentaux De CSS

bookAjout de Polices Personnalisées à une Page Web

Les polices jouent un rôle crucial dans l'amélioration de l'attrait visuel d'une page web. Les concepteurs créent de nombreuses polices mémorables et esthétiques afin de laisser une impression durable aux utilisateurs. Les sites web dotés de polices mal conçues peuvent avoir du mal à attirer l'attention. Heureusement, il existe des ressources offrant un accès gratuit, permettant à chacun d'utiliser des polices préexistantes. Cependant, il est important de noter qu'il existe également des polices sous licence nécessitant un achat, et il est essentiel de respecter les lois sur le droit d'auteur afin d'éviter toute infraction.

Service Google Fonts

De nombreuses polices attrayantes sont disponibles en utilisation gratuite. Examinons les options proposées par https://fonts.google.com/. 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).

index.html

index.html

styles.css

styles.css

copy

La propriété font-family ne fonctionne pas car notre projet n’a pas encore connaissance de la police personnalisée « DM Sans ». Ajoutons la 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, 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 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érifier ensuite le bon fonctionnement du projet.

index.html

index.html

styles.css

styles.css

copy

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.

question mark

Pourquoi devons-nous utiliser différentes polices sur une page web ?

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 2. Chapitre 4

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Awesome!

Completion rate improved to 2.56

bookAjout de Polices Personnalisées à une Page Web

Glissez pour afficher le menu

Les polices jouent un rôle crucial dans l'amélioration de l'attrait visuel d'une page web. Les concepteurs créent de nombreuses polices mémorables et esthétiques afin de laisser une impression durable aux utilisateurs. Les sites web dotés de polices mal conçues peuvent avoir du mal à attirer l'attention. Heureusement, il existe des ressources offrant un accès gratuit, permettant à chacun d'utiliser des polices préexistantes. Cependant, il est important de noter qu'il existe également des polices sous licence nécessitant un achat, et il est essentiel de respecter les lois sur le droit d'auteur afin d'éviter toute infraction.

Service Google Fonts

De nombreuses polices attrayantes sont disponibles en utilisation gratuite. Examinons les options proposées par https://fonts.google.com/. 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).

index.html

index.html

styles.css

styles.css

copy

La propriété font-family ne fonctionne pas car notre projet n’a pas encore connaissance de la police personnalisée « DM Sans ». Ajoutons la 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, 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 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érifier ensuite le bon fonctionnement du projet.

index.html

index.html

styles.css

styles.css

copy

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.

question mark

Pourquoi devons-nous utiliser différentes polices sur une page web ?

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 2. Chapitre 4
some-alt