Lisez cet article pour découvrir comment utiliser les polices web Adobe Typekit, les polices web Edge et les polices web auto-hébergées sur vos pages web.

Remarque :

Aucune nouvelle fonctionnalité n’est plus ajoutée à Adobe Muse et le support prendra fin le 26 mars 2020. Pour plus d’informations et pour obtenir de l’aide, reportez-vous à la page de fin de service Adobe Muse.

Remarque :

  Typekit s’appelle désormais Adobe Fonts et est inclus avec Creative Cloud et d’autres abonnements. En savoir plus.

Utilisation des polices Typekit dans Adobe Muse

Les polices web Adobe Typekit sont désormais disponibles dans le menu Ajouter/supprimer des polices web d’Adobe Muse.

Vous pouvez essayer une sélection limitée de polices de la bibliothèque Typekit avec n’importe quel niveau d’abonnement Creative Cloud, et si vous avez souscrit à une formule payante, vous avez accès à la bibliothèque complète comprenant des milliers de polices. Pour plus d’informations sur les formules d’abonnements pour Typekit, voir Formules d’hébergement de police web de Typekit.

Contrairement aux polices web auto-hébergées, Typekit héberge les polices que vous décidez d’utiliser pour votre site web. Cela signifie que si vous sélectionnez des polices dans la bibliothèque Typekit et publiez le site dans Adobe Muse, Typekit héberge automatiquement ces polices et connecte votre compte Typekit à votre site web.

Ajout de polices Typekit à votre site

  1. Dans Adobe Muse, sélectionnez Fichier > Ajouter/supprimer des polices web.

    FileAddRemoveWebFonts
  2. Dans la boîte de dialogue Ajouter des polices web, l’onglet Typekit répertorie toutes les polices web Typekit disponibles pour votre type de compte Creative Cloud.

    AddWebFonts
  3. Recherchez la police qui correspond le mieux à vos besoins de conception. Vous pouvez utiliser les options de tri et de filtre suivantes pour sélectionner la police dont vous avez besoin.

    • Cliquez sur le bouton pour trier en fonction des options En vedette, Plus récente et Noms.
    SortTypekitFonts
    • Cliquez sur Filtre pour bénéficier de l’un des filtres suivants :
      • Classification : vous pouvez filtrer les polices Typekit en fonction de leurs classifications, par exemple Serif, Sans Serif, Script, etc.
      • Recommandée pour : filtre les polices en fonction des recommandations de Typekit pour les paragraphes ou les titres.
      • Propriétés : filtre basé sur des propriétés telles que l’épaisseur, la largeur, la hauteur, etc.
    AddWebFontsFilters
  4. Dès que vous avez trouvé la police que vous souhaitez utiliser, cliquez simplement dessus. Une coche apparaît, indiquant que la police est sélectionnée. Si vous le souhaitez, vous pouvez choisir plusieurs polices à ajouter simultanément. L’onglet Polices sélectionnées affiche toutes les polices que vous avez sélectionnées.

    SelectedTypekitWebFonts
  5. Cliquez sur OK. La boîte de dialogue Notification à propos des polices web s’affiche, confirmant que les nouvelles polices web ont été ajoutées. Sélectionnez l’option Ne plus afficher si vous le souhaitez.

    fig_07_type
    Cliquez sur OK pour fermer le message de confirmation.

    Désormais, lorsque vous utilisez le menu Police pour choisir une nouvelle fois l’option Polices Web, la liste des polices que vous avez ajoutées est affichée.

    FileAddRemoveWebFonts

Application de polices Typekit à votre texte

  1. Dans Adobe Muse, sélectionnez le texte auquel vous voulez appliquer la police Typekit.

    TextForEdgeWebFont
  2. Avec le texte toujours sélectionné, sélectionnez la police Typekit à appliquer dans le menu Police.

    ApplyTypekitFont

Utilisation des polices web Edge dans Adobe Muse

Les polices web vous permettent de choisir parmi des centaines de polices dans une grande bibliothèque en ligne hébergée par Typekit.com. La bibliothèque de polices web d’Adobe Muse est incluse dans votre abonnement Adobe Muse. Vous n’avez pas besoin de vous inscrire, ni d’acquérir un compte Typekit pour accéder aux polices et les utiliser dans vos conceptions web.

Remarque : si vous disposez d’un compte Typekit, vous remarquerez que le jeu de polices web actuellement disponible dans Adobe Muse est différent du jeu auquel vous avez accès lorsque vous consultez typekit.com. Les polices web fournies dans Adobe Muse sont gratuites, sans restriction et ne nécessitent pas de compte Typekit. Les polices web associées à un compte Typekit sont dotées de restrictions et d’un accès contrôlé. Les futures versions d’Adobe Muse vous permettront d’accéder à votre bibliothèque de polices Typekit à partir de l’espace de travail Adobe Muse, mais cette fonctionnalité n’est pas encore disponible.

L’utilisation des polices Web présente de nombreux avantages, notamment :

  • Vous pouvez choisir des polices uniques et très stylisées pour définir le style du contenu du texte, même si les polices ne sont pas installées sur votre ordinateur.
  • Les polices Web que vous appliquez au texte sont automatiquement liées aux pages lors de la publication, de l’exportation ou de la prévisualisation du site.
  • Les polices sont hébergées par Typekit.com. Lorsque les visiteurs affichent le site publié dans un navigateur, la police est téléchargée en arrière-plan pour afficher le texte..

Dans les rares cas où les serveurs Typekit ne parviennent pas à charger dynamiquement la police choisie lors du chargement des pages, le texte est néanmoins affiché à l’aide d’une police de secours par défaut. Ce scénario est très peu probable, mais il est important de savoir que le texte sera toujours lisible pour les visiteurs, et que le site n’affichera pas de message d’erreur.

Soyez vigilant lors de l’ajout de polices Web à votre conception. Si vous ajoutez un trop grand nombre de polices web, les visiteurs subiront des durées de téléchargement plus longues, ce qui peut rendre les sites beaucoup plus lents et affecter globalement l’expérience de l’utilisateur. En gardant cela à l’esprit, limitez vos conceptions en appliquant 1 à 2 familles de police avec 4 styles par famille. Les polices web étant des ressources distantes (comme les images et la vidéo), elles doivent être téléchargées dans le cache du navigateur des visiteurs lorsque ceux-ci affichent les pages d’un site.

Adobe Muse dispose d’une autre fonctionnalité, qui assure le suivi de toutes les polices web qui sont utilisées dans un site. Si vous supprimez une police web qui est utilisée dans un fichier .muse, cette police figurera encore dans la liste du menu Police lors de la prochaine ouverture du fichier .muse en question. Vous ne pouvez pas supprimer par mégarde une police web dont le site a besoin, et vous n’avez pas besoin d’assurer manuellement le suivi des polices que vous utilisez lors de la conception des pages.

Ajout de polices web Edge à un projet Adobe Muse

Pour ajouter une nouvelle police Web, procédez comme suit :

Une nouvelle fenêtre apparaît, affichant la bibliothèque de polices Web.

  1. Utilisez l’outil Texte pour sélectionner du texte dans un bloc de texte.

  2. Utilisez le menu Police (dans le panneau de configuration ou dans le panneau Texte) pour choisir Polices Web > Ajouter des polices Web...

    EdgeWebFontsLibrary
    La bibliothèque de polices web vous permet d’accéder à des centaines de polices que vous pouvez appliquer à vos pages.

    Vous pouvez cliquer sur les filtres situés en haut de la page pour choisir le style de police que vous souhaitez ajouter. Ou utiliser le champ de recherche pour trouver une police par son nom.

  3. Dès que vous avez trouvé la police que vous souhaitez utiliser, cliquez simplement dessus. Une coche apparaît, indiquant que la police est sélectionnée. Si vous le souhaitez, vous pouvez choisir plusieurs polices à ajouter simultanément.

    SelectedEdgeWebFonts
    Cliquez sur les polices que vous souhaitez ajouter, une coche indique qu’elles sont sélectionnées.

    Vous pouvez cliquer sur le bouton ligne simple ou multi-ligne dans la partie supérieure droite de la fenêtre, pour afficher les polices les plus adaptées aux en-têtes ou aux paragraphes.

    EdgeWebFontsFilters
    Consultez la liste des polices les plus adaptées pour définir le style du texte d’un en-tête.

    Si vous cliquez sur le bouton représentant une coche, situé à l’extrême droite, la fenêtre affiche la liste des polices que vous avez sélectionnées. Si vous changez d’avis et décidez de ne pas ajouter de police, cliquez simplement sur le nom de la police pour la désélectionner.

    La boîte de dialogue Notification à propos des polices Web s’affiche, confirmant que les nouvelles polices Web ont été ajoutées.

  4. Lorsque vous avez terminé la sélection des polices à ajouter, cliquez sur OK.

  5. Cliquez sur OK.

    Si vous le souhaitez, cochez la case Ne plus afficher.

    fig_07_type
    Cliquez sur OK pour fermer le message de confirmation.

    Désormais, lorsque vous utilisez le menu Police pour choisir une nouvelle fois l’option Polices Web, la liste des polices que vous avez ajoutées est affichée.

    EdgeWebFonts
    Choisissez Ajouter des polices web dans la section Polices web du menu Police.

Ajout et application de polices web Edge

  1. Dans Adobe Muse, sélectionnez le texte auquel vous souhaitez appliquer les polices web Edge.

    TextForEdgeWebFont
  2. Avec le texte toujours sélectionné, sélectionnez la police web Edge à appliquer dans le menu Police.

    ApplyEdgeWebFonts

Utilisation des polices web auto-hébergées dans Adobe Muse

La fonction de polices web auto-hébergées permet d’accéder et d’utiliser les polices web que vous avez achetées auprès de fournisseurs tiers. Certaines polices web peuvent ne pas être disponibles sur l’ordinateur ou le appareil de chaque visiteur du site. Dans ce cas, selon le moteur de texte du navigateur une police pour le web est utilisée à la place, ce qui affecte considérablement l’aspect de votre site web.

Les polices web doivent être téléchargées depuis un serveur, tel que celui hébergé par Adobe Edge web Fonts (compatible Typekit). Sinon, elles peuvent être conservées sur le même serveur web qui héberge votre site. L’approche qui consiste à héberger et rendre les polices web en temps réel au cours d’une visite du site est appelée auto-hébergement, et les polices obtenues de cette manière sont appelées polices web auto-hébergées.

Conditions préalables

Les types de police suivants sont nécessaires lorsque vous travaillez avec des polices web auto-hébergées :

Polices système

Elles sont nécessaires pour concevoir votre page web dans Adobe Muse. Lorsque vous achetez une police web, assurez-vous que vous téléchargez et installez sur votre bureau des polices pourvues des licences appropriées. Adobe Muse prend en charge les formats de police suivants :

  • Police True Type (.ttf)
  • Police Open Type (.otf)
  • Collections True Type (.ttc)
  • Polices Mac Data Fork (.dfont)
  • Mac Resource Fork TrueType Suitcases

Polices web

Elles sont utilisées lors du rendu de votre site dans le navigateur. Adobe Muse nécessite d’obtenir les formats suivants de police web afin de rendre la police dans tous les navigateurs :

  • Web Open Font Format (.woff)
  • Embedded OpenType (.eot)
  • Scalable Vector Graphics (.svg). Ce format est nécessaire pour les appareils Android plus anciens.

 

Ajouter des polices web auto-hébergées

  1. Sélectionnez Fichier > Ajouter/supprimer des polices web pour afficher la boîte de dialogue Ajouter des polices web.

  2. Dans la boîte de dialogue Ajouter des polices web, sélectionnez l’onglet Polices web auto-hébergées.

    SelfHostedWebFontsDialog
  3. Recherchez et sélectionnez le dossier contenant la police ou faites-la glisser sur la boîte de dialogue Ajouter des polices web. Lors de la localisation de polices web, Adobe Muse affiche une invite en conséquence. Si vous avez ajouté des polices web par le passé, cliquez sur le bouton + Ajouter des polices pour continuer.

    SelfHostedWebFontsFound
  4. Adobe Muse recherche les fichiers de police web dans le dossier spécifié et les associe automatiquement à la police système correspondante. Confirmez que vous possédez la licence appropriée pour la police web, puis cliquez sur Continuer.

  5. Le mode de gestion est automatiquement activé et les polices web qui ont été ajoutées sont répertoriées.

    ManageModeSelfHostedWebFonts

Gestion des polices web auto-hébergées

Le mode de gestion affiche une liste de toutes les polices web auto-hébergées avec la police de bureau correspondante. Les polices nouvellement ajoutées s’affichent au haut de la liste, ainsi que les polices avec des fichiers de polices manquants ou sans police de bureau correspondante.

Le mode de gestion des polices web auto-hébergées vous permet d’effectuer les opérations suivantes :

Spécification d’une police de bureau correspondante

Parfois, Adobe Muse ne parvient pas à associer automatiquement une police web à sa police de bureau correspondante. Dans ce cas, vous êtes invité à spécifier clairement une correspondance pour la police web. Pour spécifier une correspondance pour une police web, procédez comme suit :

  1. Cliquez sur le bouton  pour afficher une boîte de dialogue pour votre police.

  2. Cliquez sur le bouton de correspondance pour afficher la liste des polices installées sur votre système.

  3. Sélectionnez une police système correspondante en faisant défiler la liste ou en filtrant sur le nom. Cliquez sur OK pour confirmer la correspondance.

Spécification des fichiers de polices manquants

Si Adobe Muse n’a pas pu localiser automatiquement les fichiers .eot ou .svg correspondants à un fichier .woff, vous pouvez les localiser manuellement. Pour localiser un fichier de police manquant, cliquez sur le bouton  en regard de la police. Cliquez sur Parcourir et recherchez l’emplacement du fichier manquant. Cliquez sur OK pour ajouter le fichier manquant.

Diverses tâches

  • Fournir les informations de licence : cliquez sur le bouton  en regard de la police à modifier, puis saisissez les informations de licence. Cliquez sur le bouton OK pour terminer.
  • Supprimer des polices : sélectionnez la police à supprimer, puis cliquez sur OK.
  • Filtrer la liste des polices : filtrez la liste des polices en saisissant une partie ou l’ensemble des lettres du nom de la police dans la zone de texte Filtre.

Parcourir les polices web auto-hébergées

Si vous avez ajouté au préalable des polices web auto-hébergées, le mode de navigation est automatiquement activé lorsque vous lancez la boîte de dialogue Ajouter des polices web. Ce mode assure l’affichage des vignettes des polices (regroupées par famille) et vous permet de sélectionner celles à ajouter à la liste déroulante des polices. (Par défaut, toutes les polices web auto-hébergées récemment ajoutées sont ajoutées à la liste déroulante des polices, sauf en cas de fichiers de polices manquants ou d’absence de police de bureau correspondante.) Vous pouvez également filtrer les familles de police par nom ou afficher uniquement les éléments sélectionnés. 

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