Remarque :

Typekit se nomme désormais Adobe Fonts

Auparavant, les polices web d’un site spécifique étaient organisées dans un kit ; ce kit porte désormais le nom de projet web.

Les polices sont toujours ajoutées à votre site web avec le code incorporé que nous fournissons (cela est expliqué dans ce tutoriel) et elles s’accompagnent de la même licence. En savoir plus sur Adobe Fonts.

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.

Choix des polices à utiliser

Commencez par parcourir la bibliothèque de polices. À l’aide du sélecteur de mode en haut de la page, vous pouvez permuter entre les collections de polices japonaises et par défaut.

Basculement entre les collections de polices sur fonts.adobe.com

Ajoutez des filtres pour affiner la liste de polices. Vous pouvez filtrer par classification (par exemple : serif ou sans serif), par propriétés (par exemple : hauteur x, largeur ou épaisseur) ou par langue. Vous pouvez également choisir entre deux catégories « recommandées » : titres et paragraphes. Ces polices s’affichent particulièrement bien à ces tailles dans tous les navigateurs et systèmes d’exploitation.

La collection de polices japonaises présente différentes options de filtrage. Vous pouvez ainsi rechercher uniquement des polices kana ou effectuer une recherche par classification de style, comme Mincho, Gothic, Maru Gothic et Brush.

Recherche de polices japonaises dans la bibliothèque

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.

Création d’un projet 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. Attribution d’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.

Création d’un projet : choix d’un nom et sélection des styles de police.

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.

Code incorporé et CSS de votre projet 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

Le projet web et toutes les polices que vous y avez ajoutées sont répertoriés sous Mes polices Adobe. Cliquez sur le bouton Modifier le projet pour modifier les styles et graisses de polices inclus, supprimer complètement une famille de polices web du projet ou encore modifier le jeu de caractères qui spécifie la prise en charge linguistique du projet.  

Projet web sur la page Mes polices Adobe.

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 également 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.

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.

Les règles CSS s’appliquent aux polices web de votre site web.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne