Personnalisez le style, la taille, la couleur et l’espacement du texte de votre site.
Ce guide vous explique comment modifier les polices de votre site, leur style, leur taille, leur couleur et leur espacement. Tous les sites utilisent d’abord des styles de police par défaut, que vous pouvez ensuite modifier et ajuster depuis le panneau Styles du site.
Regarder une vidéo
Fonctionnement des polices de caractères dans Squarespace
Lorsque vous consultez le menu des polices, veuillez noter que :
- Notre collection de polices comprend 600 polices Google et 1 000 polices Adobe. Cette collection n’inclut pas toutes les polices Google et Adobe disponibles. Faites défiler l’écran pour accéder à notre catalogue complet ou utilisez le champ de recherche du menu pour trouver une police spécifique.
- Pour éviter que les menus soient trop longs, nous limitons d'abord ce qui y apparaît en nous concentrant sur vos polices récemment utilisées et nos options les plus populaires. Certaines options de formatage proposées par Google Fonts ou Adobe Fonts ne sont pas prises en charge par Squarespace.
Lorsque vous choisissez vos polices, gardez à l’esprit que :
- Les packs de polices de Squarespace sont conçus pour donner un style cohérent à votre site sans que vous n’ayez à choisir manuellement tous les paramètres de police. Les packs de polices utilisent des polices Google Fonts qui sont largement disponibles, ce qui vous permet de conserver une image de marque cohérente sur toutes les plateformes.
- Les options de style de police sont intentionnellement limitées afin de garantir la cohérence sur l’ensemble de votre site. Pour modifier les polices au-delà des ajustements disponibles, vous pouvez ajouter une police personnalisée à l’aide de code CSS. Dans la version 7.0, vous pouvez ajouter des polices Adobe Fonts personnalisées.
- Certaines polices peuvent avoir une apparence différente d’un appareil à un autre, par exemple sur Windows et sur Mac, ou sur iOS et sur Android. Les navigateurs peuvent également afficher les polices différemment dans certains cas, notamment dans les menus déroulants.
- Google ou Adobe suppriment parfois des polices de leurs bibliothèques. Tout texte du site utilisant actuellement cette police ne changera pas, mais si vous passez à une autre police, vous ne pouvez pas revenir en arrière. Lorsqu'une police n'est plus disponible, nous la remplaçons sur Squarespace par la plus ressemblante.
Lorsque vous utilisez des polices sur votre site, veuillez noter que :
- La plupart des modifications apportées à une catégorie de police (comme Titres et Paragraphes) s’appliquent à l’ensemble du site. Par exemple, si vous changez la police de votre Titre 1, tout texte défini comme Titre 1 sur votre site verra la même modification s’appliquer.
- Pour créer des en-têtes dans le corps de texte, utilisez le menu déroulant Format dans l’éditeur du bloc Texte. Après avoir créé des en-têtes, vous pouvez modifier le style des titres. Pour en savoir plus, consultez l’article Mettre en forme un texte.
- La modification du format du texte dans la barre d’outils de texte remplace les styles définis pour cette zone de texte dans les styles du site. Par exemple, si vous définissez le texte de l’extrait d’un billet de blog sur Titre 1 avec la barre d’outils de texte et que vous modifiez ensuite la police ou la taille des extraits de blog dans les styles du site, le texte que vous avez modifié suivra toujours les styles du Titre 1.
Conseil : Pour obtenir de l'aide sur le choix des meilleures polices pour votre site, consultez la page Choisir les bonnes polices et couleurs.
Comment fonctionne la mise à l’échelle du texte dans Squarespace
La mise à l’échelle du texte se produit lorsque la taille de votre texte change pour remplir une certaine zone de votre site. Notre design réactif garantit que le texte s’adapte à toutes les tailles d’écran. La mise à l’échelle du texte de votre site dépend de la version de votre site.
Votre texte s’adapte à la taille de base de la police utilisée.Vous pouvez utiliser la mise à l’échelle du texte pour remplir un bloc Texte, et ce quels que soient les paramètres de la police.
Votre texte s’adapte à la taille de la fenêtre du navigateur.Certaines familles de templates incluent une option permettant d’affiner la mise à l’échelle du texte.
Trouver un ajustement de police
Les options d’ajustement des polices diffèrent selon la version de votre site.
Pour modifier toutes les polices à l'échelle du site :
- Pendant que vous modifiez une page, ouvrez le panneau Styles du site, puis cliquez sur > à côté de Polices.
- Cliquez sur Changer sur le pack de polices actuel pour afficher tous les packs de polices disponibles. Cliquez sur Sans serif (Sans empattement), Serif (Avec empattement) ou Mixte pour afficher différents packs de polices pour chaque style.
- Cliquez sur un nouveau pack de polices pour le prévisualiser sur votre site.
- Cliquez sur Retour pour revenir au panneau Polices et définir la taille de base de la police. Tous les autres éléments de texte seront redimensionnés par rapport à cette taille.
- Vos modifications sont conservées lorsque vous modifiez d’autres contenus de la page. Pour enregistrer vos modifications, cliquez sur Enregistrer. Pour arrêter la modification, cliquez sur Quitter.
Si vous ne souhaitez pas que Google Fonts ou Adobe Fonts (anciennement Typekit) se chargent sur votre site, sélectionnez l’un de nos packs de polices intégrés :
- Sous Sans-serif, sélectionnez Helvetica Neue
- Sous Serif, sélectionnez Georgia
- Sous Mixed, sélectionnez Verdana
Pour modifier un ajustement de police spécifique :
- Dans le panneau Polices, cliquez sur Attribuer des styles.
- Recherchez le groupe de texte que vous voulez modifier, comme Titre ou Bouton, puis cliquez dessus pour ouvrir toutes les options d’ajustement pour ce groupe. Vous pouvez également cliquer sur du texte dans l’aperçu de la page pour afficher les options d’ajustement.
- Cliquez sur le menu déroulant à côté du nom de l’ajustement pour attribuer un nouveau style de police. Pour le personnaliser davantage, cliquez sur Personnaliser, puis utilisez les autres options qui s’affichent.
- Cliquez sur Tout afficher ou sur Retour pour revenir à la liste complète.
Pour modifier un ajustement de police, ouvrez le panneau Styles du site. Selon le template que vous utilisez, des options et des noms de groupes de polices différents sont proposés. Les ajustements de police peuvent être identifiés grâce au nom du groupe qu’ils affectent et à la petite flèche qui ouvre les autres options.
Si vous ne souhaitez pas que les polices Google Fonts ou Adobe Fonts (anciennement Typekit) soient chargées sur votre site, cliquez sur Définir les polices système pour tout en bas du panneau Styles du site.
Si vous ne trouvez pas le groupe de texte que vous souhaitez modifier, apprenez-en plus sur les options de style de votre template dans le guide de ce même template. Vous pouvez également cliquer sur le texte d’une page pour afficher ses ajustements dans le panneau Styles du site. Cliquez sur Afficher tout pour revenir à la liste complète.
Trouver une police spécifique
La recherche de polices fonctionne différemment selon la version de Squarespace utilisée par votre site.
Pour utiliser une police Google Fonts spécifique, recherchez-la à l’aide de l’option Parcourir toutes les polices.
- Ouvrez le panneau Styles du site, puis cliquez sur > à côté de Polices.
- Cliquez sur le type de texte que vous souhaitez changer : Titres, Paragraphes, Boutons ou Divers.
- Cliquez sur le nom de la police.
- Faites défiler l’écran pour parcourir les polices disponibles ou saisissez le nom de la police dans le champ Rechercher des polices en haut du panneau. Pour parcourir les polices Adobe Fonts, cliquez sur Parcourir les polices anciennes en bas de la liste.
- Vos modifications sont conservées lorsque vous modifiez d’autres contenus de la page. Pour enregistrer vos modifications, cliquez sur Enregistrer. Pour arrêter la modification, cliquez sur Quitter.
Conseil : la catégorie Divers s’applique à la plupart des textes qui ne sont pas un titre ou un texte de paragraphe classique, comme les prix des produits, la navigation dans les blocs Menu et d’autres métadonnées de contenu.
Pour utiliser une police Google Fonts ou Adobe Fonts spécifique, utilisez le champ de recherche de l’ajustement de la police pour la trouver.
- Ouvrez le panneau Design, puis cliquez sur Styles du site.
- Cliquez sur l’ajustement de police que vous souhaitez changer, puis cliquez sur le menu déroulant à côté du nom de la police.
- Faites défiler l’écran pour parcourir les polices disponibles ou saisissez le nom de la police dans le champ Rechercher des polices en haut du menu.
- Cliquez sur la police que vous souhaitez utiliser, puis cliquez sur Enregistrer en haut du panneau pour appliquer vos modifications.
Si vous n’avez pas de police particulière en tête, Google et Adobe disposent de ressources pour rechercher et prévisualiser les polices sur leur plateforme :
Lorsque vous avez trouvé une police qui vous convient, recherchez-la dans Squarespace. Notez que certaines polices ne sont pas disponibles.
Modifier une police
Le style des polices fonctionne différemment selon la version de Squarespace utilisée par votre site.
Pour styliser vos polices :
- Ouvrez le panneau Styles du site, puis cliquez sur > à côté de Polices.
- Cliquez sur le type de texte que vous souhaitez changer : Titres, Paragraphes, Boutons ou Divers.
- Le nom de la police apparaît en haut. Utilisez les options de style et de taille pour changer le style.
- Vos modifications sont conservées lorsque vous modifiez d’autres contenus de la page. Pour enregistrer vos modifications, cliquez sur Enregistrer. Pour arrêter la modification, cliquez sur Quitter.
Ajustez les styles tels qu'expliqués dans le tableau ci-dessous.
Conseil : pour modifier la couleur de votre texte, modifiez les couleurs à l’échelle du site ou les couleurs de votre section. Dans un bloc Texte, vous pouvez également utiliser la barre d’outils Texte.
|
Nom du style |
Options |
|
Poids |
Rend le texte plus épais ou plus fin. |
|
Style |
Applique le format normal, gras, italique, etc. au texte en fonction de la police choisie. |
|
Hauteur de ligne |
Modifie l'espacement entre les lignes du texte. |
|
Espacement des lettres |
Modifie l’espacement entre chaque lettre. |
|
Modification de la casse |
Mettez en majuscule une partie ou la totalité du texte. Cette option n'est disponible que pour certaines polices. |
|
Taille |
Agrandissez ou réduisez le texte. Chaque type de texte comporte une ou plusieurs options de taille. Par exemple, Titres inclut des curseurs pour la mise en forme du Titre 1, du Titre 2, du Titre 3 et du Titre 4 dans la section Taille. Vous pouvez également modifier la taille du texte dans des blocs Texte individuels à l'aide de la barre d'outils de texte. |
Cliquez sur un ajustement de police ou de typographie pour ouvrir ses autres options, y compris le nom de la police, sa taille et l’espacement entre les lettres.
Selon le texte et le template, vous pouvez ajuster les options de typographie figurant dans le tableau ci-dessous. Des options et des ajustements de style supplémentaires sont disponibles pour différents templates et polices.
Astuce : pour changer la couleur de votre texte, utilisez l’ajustement de couleur pour ce type de texte dans le panneau Styles du site. Pour en savoir plus, consultez l’article Modifier les couleurs.
|
Nom de l’ajustement |
Options |
|
Police de caractères |
Sélectionnez ou recherchez une police Google ou Adobe. Vous verrez des sélections ciblées en haut du menu. Faites défiler vers le bas pour parcourir notre bibliothèque complète ou utilisez le champ de recherche en haut du menu si vous connaissez le nom d'une police que vous souhaitez utiliser. |
|
Taille de Police |
Déplacez le curseur ou saisissez une taille de police manuellement. |
|
Hauteur de Ligne |
Définissez l'espacement entre les lignes. Une hauteur de ligne de 0 em peut entraîner la superposition du texte, surtout sur les appareils mobiles. |
|
Espacement des Lettres |
Définissez l'espacement entre les lettres. Les valeurs négatives peuvent être à l'origine d'une superposition des caractères. |
|
Transformation du Texte |
Sélectionnez Aucun, Mettre en majuscules, Majuscules ou Minuscules. |
|
Ornement de texte |
Sélectionnez Aucun, Souligner, Surligner ou Barré. |
|
Alignement du texte |
Sélectionnez Gauche, Centre ou Droite. |
Ajouter une police Adobe personnalisée (version 7.0 uniquement)
Si vous avez une police personnalisée, vous pouvez l'ajouter à votre site Squarespace version 7.0 en utilisant notre intégration avec Adobe Fonts. Les polices Adobe personnalisées ne sont pas prises en charge dans la version 7.1.
- Ce processus remplace les options de polices d'Adobe dans les menus Styles du site par les polices de votre projet personnalisé. Les polices Adobe de Squarespace ne seront pas disponibles tant que votre projet Adobe Fonts personnalisé est activé.
- Les polices personnalisées sont disponibles avec un abonnement Adobe Creative Cloud. Avant de vous abonner, choisissez un forfait incluant Adobe Fonts.
Étape 1 - Créer un projet web et ajouter des polices
Pour ajouter vos polices personnalisées à Squarespace, vous devez commencer par créer un projet web dans Adobe. Connectez-vous à votre compte Adobe Fonts, puis suivez les étapes indiquées pour créer un projet web.
Une fois votre projet web créé, votre code d’intégration 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 plus court.
É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.
- Dans votre compte Adobe Fonts, cliquez sur Mes polices Adobe en haut à droite.
- Cliquez sur Projets web, puis recherchez le projet que vous souhaitez ajouter à Squarespace.
- Copiez l’identifiant de projet (la série de lettres et de chiffres au-dessus du code d’intégration). Assurez-vous de copier votre identifiant unique de projet, et non celui indiqué dans cet exemple.
- Ouvrez le panneau Outils de développement.
- Cliquez sur Clés API externes.
- Faites défiler vers le bas jusqu’au champ Identifiant de projet Adobe Fonts.
- Collez dans le champ l’identifiant de projet que vous avez copié sur Adobe.
- Cliquez sur Enregistrer.
É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.
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 personnalisées ne s'affichent pas sur mon site
Si certains caractères spéciaux ne s’affichent pas correctement, modifiez le projet web et sélectionnez Tous les caractères avant d’ajouter l’identifiant de projet à Squarespace.
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.
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.
Résolution des problèmes de police
Avant de suivre ces étapes, veuillez vérifier si le problème que vous rencontrez n’est pas lié à votre navigateur. Si les étapes de dépannage du navigateur se révèlent infructueuses, consultez cette section pour découvrir comment résoudre d’autres types de problèmes fréquemment rencontrés en modifiant les polices.
J'ai copié et collé du texte, mais il ne correspond pas à ma mise en forme
Quand vous copiez-collez du texte, vous risquez de copier également la mise en forme qui peut interférer avec le CSS de Squarespace. L’affichage de votre texte peut alors ne pas suivre les paramètres que vous avez définis dans le panneau Styles du site.
Pour éviter cela, nous vous conseillons de commencer par copier-coller votre texte dans un programme de traitement de texte qui élimine toute mise en forme spéciale ou dans lequel la mise en forme peut être supprimée à l’aide d’un raccourci clavier.
- Sous Windows, appuyez sur Ctrl + Maj + V pour coller le texte sans la mise en forme.
- Sur un Mac, appuyez sur ⌘ + Maj + V pour coller le texte sans la mise en forme.
- Vous pouvez également coller du texte sans la mise en forme en cliquant sur l'icône du Presse-papiers. Si vous avez déjà saisi du texte, supprimez la mise en forme en mettant le texte en surbrillance et en cliquant sur l'icône Supprimer la mise en forme.
Ma police apparaît différemment lorsque je suis connecté
Le rendu des polices une fois sur votre site peut être altéré par votre domaine.
Si vous avez connecté un domaine externe à votre site, contactez votre fournisseur de domaine pour vous assurer que vous n’avez pas activé le transfert masqué. Le masquage détermine la façon dont votre domaine dirige les visiteurs vers votre site et peut interférer avec les paramètres de style de Squarespace.
Je ne parviens pas à définir la taille souhaitée pour ma police
Si vous ne parvenez pas à définir votre police sur la taille en px (pixel) souhaitée, votre site utilise peut-être une valeur em ou rem.
- Tous les sites de la version 7.1 utilisent des valeurs rem pour les tailles de police. La taille est donc relative à la taille de la police de base. Pour modifier la valeur rem d’une police, utilisez le curseur ou cliquez sur la valeur actuelle et saisissez manuellement une nouvelle valeur. Pour modifier la taille de police de base, ajustez la Taille de base sur le pack de polices.
- Pour les sites de la version 7.0, certains templates utilisent des em au lieu de px pour la police et la taille de l'espacement. Si vous entrez une valeur directement dans le champ Numéro, vous pouvez choisir de garder la taille évolutive avec les em ou de la garder fixe avec les px. Cependant, si votre template utilise uniquement des px , n'entrez pas de valeur en em à sa place, car la police risque alors de ne pas être redimensionnée correctement sur les petits écrans.
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.