Remarque : même si nos guides les plus populaires ont été traduits en français, certains guides sont uniquement disponibles en anglais.
Utiliser Adobe Fonts avec Squarespace

Adobe Fonts (anciennement appelé Typekit) est un service qui propose un catalogue de polices de haute qualité. Grâce à notre intégration, vous pouvez faire votre choix parmi plus de 1 000 polices Adobe Fonts pour votre site. Vous pouvez également ajouter un projet de polices personnalisées à votre site. 

Choisir des polices Adobe Fonts

Recherchez nos polices Adobe Fonts intégrées dans le panneau Styles du site. 

Dans le Menu principal, cliquez sur Design, puis sur Styles du site. Suivez les étapes détaillées dans le guide Changer de police pour accéder aux ajustements Police et Typographie

Dans le panneau Styles du site, les menus de police comprennent l’intégralité des polices disponibles. Faites défiler l’écran vers le bas pour accéder à notre catalogue complet ou utilisez le champ de recherche du menu pour trouver une police spécifique. 

Astuce : si vous avez besoin d’inspiration, utilisez l’outil d’Adobe pour la recherche et la prévisualisation des polices. Lorsque vous avez trouvé une police Adobe Fonts qui vous convient, recherchez son nom dans Squarespace.

search_fonts.png

Ajouter des polices personnalisées à Squarespace

Pour ajouter des polices Adobe Fonts personnalisées à votre site, suivez les étapes ci-dessous. Dans ce processus, les options des polices Adobe Fonts dans les menus du panneau Styles du site sont remplacées par les polices de votre projet de polices personnalisées. Les polices Adobe Fonts de Squarespace apparaissent toujours dans vos options, mais elles ne peuvent pas être utilisées tant que vos polices Adobe Fonts personnalisées sont activées. 

Remarque : les polices personnalisées sont disponibles avec un abonnement Adobe Creative Cloud. Avant de vous abonner, choisissez un forfait dans lequel Adobe Fonts est inclus. 

Étape 1 - Créer un projet web et ajouter des polices

Pour ajouter vos polices personnalisées dans Squarespace, vous devez commencer par créer un projet web dans Adobe (anciennement appelé « kit ») :

  1. Connectez-vous à votre compte Adobe Fonts, puis cliquez sur Parcourir les polices en haut à gauche.

browse_fonts.jpg

  1. Parcourez les polices en faisant défiler la liste ou utilisez des filtres pour la modifier.
  2. Pour enregistrer une police, cliquez sur </>.

choose_a_font.jpg

  1. Dans la fenêtre qui s’affiche, sélectionnez Créer un nouveau projet dans le menu déroulant. S’il s’agit de votre premier projet web, cliquez sur OK pour commencer.
  2. Donnez un nom à votre projet, puis sélectionnez toutes les graisses et tous les styles pour la police dont vous avez besoin.
  3. Cliquez sur Créer.
  4. Si tout vous semble correct, cliquez sur Terminé.

Pour ajouter d’autres polices au projet, répétez les étapes ci-dessus et sélectionnez votre projet web dans le menu déroulant.

Remarque : une fois votre projet web créé, votre code incorporé HTML personnalisé apparaît. Ne l’ajoutez pas à votre site, car vous n’en aurez pas besoin. L’étape suivante va vous permettre d’obtenir l’identifiant du projet web, qui est une chaîne de lettres et de chiffres plus courte.

Étape 2 - Ajouter vos polices personnalisées à Squarespace

Lorsque vous avez ajouté toutes les polices nécessaires à votre projet web, ajoutez le projet à votre site Squarespace à l’aide de l’identifiant de projet.

  1. Dans votre compte Adobe Fonts, cliquez sur Mes polices Adobe en haut à droite. 

click_my_fonts.jpg

  1. Cliquez sur Projets web, puis recherchez le projet que vous souhaitez ajouter à Squarespace.
  2. Copiez l’identifiant de projet (la série de lettres et de chiffres au-dessus du code incorporé).

project_ID.jpg

  1. Connectez-vous à votre site Squarespace. Dans le Menu principal, cliquez sur Paramètres, puis sur Avancé.
  2. Cliquez sur Clés API externes.
  3. Faites défiler vers le bas jusqu’au champ Identifiant de projet Adobe Fonts.
  4. Collez dans le champ l’identifiant de projet que vous avez copié sur Adobe.
  5. Cliquez sur Enregistrer.

adobe_fonts_project_ID_field.jpg

Étape 3 - Utiliser vos polices Adobe

Après avoir ajouté des polices Adobe Fonts, vous pouvez les appliquer au texte de votre site. Dans le panneau Styles du site, les polices de votre projet web remplacent les polices Adobe Fonts intégrées.

Pour trouver rapidement une police Adobe personnalisée, recherchez-la en saisissant son nom dans la zone Rechercher.

Gérer les modifications apportées à vos polices

  • Si vous modifiez vos polices Adobe Fonts, publiez-les à nouveau afin d’afficher ces changements sur Squarespace. Pour en savoir plus, consultez la documentation d’Adobe.
  • Si Adobe Fonts retire de sa collection une police que vous utilisez, la police continuera à se charger sur votre site. Notez que vous ne pourrez pas appliquer cette police à un nouveau texte ou la rétablir si vous avez changé la police d’un segment de texte, car elle n’apparaîtra plus dans le panneau Styles du site.

Résolution de problèmes

Le message « Polices non prises en charge » s’affiche dans Styles du site

Ce message s’affiche si votre site utilise une police de caractères qu’Adobe a retirée. Lorsque la police n’est plus prise en charge, elle est remplacée par celle qui lui ressemble le plus sur Squarespace. Veuillez consulter les sections de style mentionnées dans le message d’erreur afin d’approuver ou de changer la police de substitution.

Adobe Fonts supprimera également de votre page Adobe Fonts toutes les polices qui ont été retirées.

Mes polices Adobe Fonts personnalisées ne s’affichent pas sur mon site

Si aucune de vos polices ne s’affiche, vérifiez si votre site utilise du code JavaScript. Si vous avez utilisé la méthode JavaScript d’Adobe Fonts pour ajouter des polices à votre site, vos polices peuvent ne pas se charger correctement. Supprimez le code JavaScript, puis suivez les étapes ci-dessus pour ajouter vos polices Adobe Fonts. 

Ma police est difficile à lire sur les appareils mobiles

L’affichage des polices en dessous de 100 peut être trop clair ou estompé sur les appareils mobiles. Pour assurer une bonne visibilité de votre texte quel que soit l’appareil, ouvrez le panneau Styles du site et sélectionnez une épaisseur supérieure à 100.

Obtenir de l’aide

Si vous ne parvenez pas à ajouter votre identifiant de projet Adobe Fonts ou si les polices Adobe Fonts ne s’affichent pas sur votre site, contactez-nous, et nous vous aiderons à résoudre ces problèmes. Pour toute autre question sur l’utilisation d’Adobe Fonts, contactez Adobe ou consultez sa documentation.

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 40 sur 137
Utiliser Adobe Fonts avec Squarespace