Ajout de polices à votre site web

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.

Page de navigation Adobe Fonts

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.

Création d’un projet web à partir d’une fiche de police

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.

Ajout d’un nouveau projet de police web à partir de la page de la famille de 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.

  1. Cliquez sur le menu et sélectionnez ensuite « Créer un projet ».
  2. Attribuez un nom à votre projet web.
  3. Utilisez les cases à cocher pour sélectionner les graisses et styles de police que vous souhaitez inclure.
  4. 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 Mes polices Adobe.

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

Copiez le code incorporé et ajoutez-le à la balise <head> de votre site web.

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 Mes polices Adobe.

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.  

wp-page

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.

wp-page

Logo Adobe

Accéder à votre compte