Guide d'utilisation Annuler

Ajout de polices à votre site web

Rechercher

Dernière mise à jour le 2 août 2023

Les polices web d’Adobe Fonts peuvent être utilisées sur vos sites web, dans les campagnes par e-mail HTML, dans des articles au format AMP de Google et dans bien d’autres types de projets prenant en charge les polices web.

Sélection des polices à utiliser

Commencez par explorer la bibliothèque de polices. Vous pouvez choisir la prise en charge linguistique dont vous avez besoin dans le menu déroulant LANGUES ET SYSTÈMES D’ÉCRITURE.

Interface web des polices avec mise en surbrillance des paramètres de langue — Sélectionnez le menu Langues et systèmes d’écriture pour voir le menu de filtre par langue pour les polices

Ajoutez des mots-clés ou des filtres pour affiner la liste des polices. Vous pouvez utiliser nos mots-clés de langue naturelle pour rechercher les polices qui correspondent à l’ambiance de votre projet ou bien filtrer les polices par classification (serif ou sans serif, par exemple), propriétés (œil, largeur ou graisse) ou encore langue.

Navigation dans Adobe Fonts à partir de mots-clés

Création d’un projet web

Lorsque vous avez trouvé la police de votre choix, cliquez sur le bouton </> pour ajouter la famille à un projet web.

Image des polices Gilbert avec l’option Ajouter une famille mise en surbrillance

Vous pouvez également cliquer sur le nom de la police pour ouvrir la page de la famille et afficher l’ensemble des styles et des graisses qui peuvent être utilisés. Cliquez ensuite sur </> Ajouter au projet web en haut de la page pour ajouter la famille de polices à un projet web.

Ajouter des familles de polices et choisir le style et la graisse à partir du site web des polices

Dans la fenêtre Ajouter des polices à un projet web, attribuez un nom à votre projet web et déterminez les polices qui doivent être incluses.

Cliquez sur le menu et sélectionnez ensuite « Créer un projet ».
Attribuez un nom à votre projet web.
Utilisez les cases à cocher pour sélectionner les graisses et styles de police que vous souhaitez inclure.
Créez le projet.

Par la suite, vous aurez également la possibilité d’apporter des modifications aux paramètres du projet à partir de la page Gérer les polices.

Image d’une fenêtre contextuelle dans laquelle des polices sont sélectionnées pour être ajoutées à un nouveau projet web

Vous recevrez ensuite le code d’intégration pour charger les polices dans votre site web. Les différentes options sont expliquées sur la page d’aide sur le code d’intégration. Le code d’intégration par défaut convient pour la plupart des projets.

Copiez le code d’intégration et ajoutez-le à la balise <head> de votre site web.

Le code d’intégration des polices est affiché dans l’image avec les styles de polices

Cliquez sur Terminé pour fermer la fenêtre du projet web et poursuivre l’exploration. Pour ajouter d’autres polices à votre projet, cliquez sur le bouton </> sur une autre famille de polices, puis sélectionnez le nom de votre projet dans le menu (au lieu de « Créer un projet »).

Personnalisation de votre projet web

Votre projet web et toutes les polices que vous y avez ajoutées seront répertoriés sous Gérer les polices.

Cliquez sur le bouton Modifier le projet pour modifier les graisses et styles de police inclus, supprimer totalement une famille de polices web du projet ou spécifier un paramètre font-display. Vous pouvez également modifier le jeu de caractères dans l’éditeur de projet web, qui spécifie la prise en charge linguistique du projet.

Les polices d’Asie orientale doivent être diffusées avec des jeux partiels dynamiques, tandis que les autres polices possèdent des options de jeu partiel basées sur la langue : Par défaut, Tous les caractères ou un sous-ensemble de langues personnalisé. La page d’aide Prise en charge linguistique et jeux partiels contient davantage d’informations sur les différentes options.

Vous pouvez cocher la case « Fonctionnalités OpenType » pour inclure des fonctionnalités OpenType dans le projet. L’activation de cette case affiche également une liste de fonctionnalités disponibles pour cette famille de polices web spécifique, telles que des ligatures, des caractères alternatifs ou encore des petites majuscules.

Le paramètre font-display vous permet de spécifier la manière dont les polices web sont chargées dans le navigateur web et appliquées à votre site web. Pour plus d’informations sur ces options, consultez notre page d’aide Paramètres font-display.

Une fois que la configuration du projet vous convient, cliquez sur « Enregistrer les modifications » pour enregistrer le projet. Les mises à jour seront disponibles sur votre site web après quelques minutes.

Application des polices dans le code CSS

La page Projet web répertorie le nom de la famille de polices (font-family) CSS, l’épaisseur numérique et le style de chaque police du projet. Utilisez ces noms de famille de polices dans votre feuille CSS pour appliquer les polices au texte.