Comment ajouter des polices personnalisées à Squarespace comme un pro

Vous souhaitez ajouter des polices personnalisées à Squarespace ?

Si vous êtes un utilisateur de Squarespace, vous savez déjà que la plate-forme est livrée avec des options de police solides. Mais il existe de nombreuses raisons d'ajouter des polices aux sites Web Squarespace !

Habituellement, il s'agit d'une police de marque, ou même d'une police sur mesure que vous avez créée.

Il s'agit peut-être davantage d'un aspect particulier que vous souhaitez créer pour les éléments de votre site Web.

Quelle que soit la raison, il est facile d'ajouter des polices personnalisées à Squarespace - suivez simplement ce processus !

Comment ajouter une police personnalisée à votre site Web Squarespace

Ajouter une police que vous choisissez à votre site Web Squarespace est assez simple, mais il y a un peu de CSS à ajouter.

Assurez-vous que vous êtes d'accord avec cela avant de commencer, ou attrapez quelqu'un qui l'est.

Étape 1. Choisissez votre police

Si vous avez déjà choisi la police que vous souhaitez utiliser, passez à l'étape suivante. Sinon, assurez-vous d'avoir choisi une police que vous pouvez utiliser légalement sur votre blog.

Il existe de nombreux endroits pour trouver des polices gratuites et payantes, comme Creative Market. Mais vérifiez les licences avant d'en ajouter une à votre site Web.

Étape 2. Préparez vos fichiers de polices Web

Pour ajouter une police au site Web, vous aurez besoin de trois formats de fichier de police :

1. .ttf ou .otf
2. .woff
3. .woff2

Parfois, vous pouvez avoir un type de fichier de police Web et si c'est le cas, ignorez cette étape. Vous pouvez utiliser juste cela.

Sinon, préparez les trois types de fichiers à ajouter.

Étape 3. Téléchargez vos fichiers de polices sur Squarespace

Allez dans Design > CSS personnalisé > Gérer les fichiers personnalisés

Ici, vous allez ajouter des polices via le bouton de téléchargement.

Répétez cette opération pour les trois fichiers ou pour le fichier de police Web si c'est ce que vous avez.

Étape 4. Nommez votre police personnalisée dans Squarespace

Une fois la police téléchargée, vous devez indiquer à Squarespace où et de quoi il s'agit avec l'éditeur CSS.

Utilisez le code suivant :

 @font-face { font-family: 'font-name'; src: url(URL.ttf/.otf), url(URL.woff), url(URL.woff2); }

Prenez ceci et ajoutez les informations pertinentes pour votre police :

• Nom de la police : remplacez-le par le nom de votre police basé sur le nom du fichier ou quelque chose dont vous vous souviendrez.
• URL des polices : remplacez-les par les URL des polices que vous venez de télécharger. Saisissez l'URL de votre zone de téléchargement (de la même manière que vous le feriez pour une URL d'image) et ajoutez-la en place.

Étape 5. Définir où et comment la police personnalisée doit être utilisée

Enfin, il vous suffit d'indiquer à Squarespace où utiliser les différentes polices sur votre site Web.

Cela peut être dans des endroits tels que vos en-têtes ou l'en-tête de votre site, des boutons ou même quelque chose comme le bloc de la newsletter.

Comment utiliser votre police dans les lieux communs

Une fois que vous avez téléchargé votre police, vous pouvez commencer à donner à Squarespace des informations spécifiques sur l'endroit où l'utiliser.

Voici quelques exemples populaires et comment le faire.

Comment changer les polices d'en-tête du site

L'en-tête du site est la zone située en haut de la barre de navigation.

Vous pourriez avoir beaucoup de liens ici, un logo textuel et peut-être une annonce.

La police de tous ces éléments peut être modifiée à l'aide de l'extrait CSS suivant :

 // Site Title // .header-title-text a { font-family: YOURNAME !important; } // Site Navigation // .header-nav-item a { font-family: YOURNAME !important; } // Button // .header-actions-action .btn { font-family: YOURNAME !important; } // Announcement Bar // .sqs-announcement-bar-url a { font-family: YOURNAME !important; }

N'oubliez pas de remplacer VOTRE NOM par le nom de votre police.

Comment changer les polices des boutons

Un autre endroit populaire pour utiliser des polices personnalisées est sur les boutons de votre site Web.

Il existe trois blocs de boutons : petit, moyen et grand. Vous pouvez en changer un ou tous avec le code suivant :

 // Small Button // .sqs-block-button-element--small { font-family: YOURNAME !important; } // Medium Button // .sqs-block-button-element--medium { font-family: YOURNAME !important; } // Large Button // .sqs-block-button-element--large { font-family: YOURNAME !important; } // Image Block Button // .image-button a { font-family: YOURNAME !important; }

N'oubliez pas de remplacer VOTRE NOM par le nom de votre police.

Épinglez-le sur Pinterest pour pouvoir revenir plus tard !

(Plus de conseils sur les polices personnalisées et de dépannage après le graphique).

Comment changer les polices du bloc Newsletter

Le bloc Newsletter permet aux gens de s'inscrire à votre liste de diffusion. Beaucoup de gens utilisent différents plugins pour cela.

Mais si vous utilisez le bloc dans Squarespace, le code suivant vous permettra d'ajouter une police personnalisée.

 // Newsletter Form Title //.newsletter-form-header-title { font-family: YOURNAME !important; } // Newsletter Form Description //.newsletter-form-header-description p { font-family: YOURNAME !important; } // Newsletter Form Fields //.newsletter-form-field-element { font-family: YOURNAME !important; } // Newsletter Form Button //.newsletter-form-button { font-family: YOURNAME !important; } // Newsletter Form Footnote //.newsletter-form-footnote { font-family: YOURNAME !important; }

N'oubliez pas de remplacer VOTRE NOM par le nom de votre police.

Comment changer les polices des articles de blog

L'une des choses les plus populaires à faire avec une police est de l'utiliser pour les articles de blog.

Vous devez tenir compte du titre de la page, des descriptions et des titres des articles sur les pages d'articles lorsque vous faites cela.

Vous voudrez probablement qu'ils soient tous identiques.

 // Blog Page Post Title //.blog-title { font-family: YOURNAME !important; } // Blog Page Post Descriptions //.blog-excerpt p { font-family: YOURNAME !important; } // Blog Page Read More Link //.blog-more-link { font-family: YOURNAME !important; } // Blog Post Entry Titles // .blog-item-title h1.entry-title { font-family: YOURNAME !important; }

N'oubliez pas de remplacer VOTRE NOM par le nom de votre police.

Comment changer les polices du bloc de citation

Le dernier exemple consiste à changer le bloc Citation en une police différente.

Ceci est utilisé pour les citations dans les publications, mais aussi pour des éléments tels que des témoignages ou des critiques de clients.

 // Quote Text //.sqs-block-quote blockquote { font-family: YOURNAME !important; } // Quote Source //.sqs-block-quote .source { font-family: YOURNAME !important; }

N'oubliez pas de remplacer VOTRE NOM par le nom de votre police.

Vous aimerez peut-être aussi mon guide des tailles d'image Squarespace.

Problèmes de police personnalisée

L'ajout de polices est un travail facile une fois que vous maîtrisez un peu le CSS. Mais il y a quelques erreurs courantes qui sont signalées.

Message "Polices non prises en charge" dans les styles de site

Parfois, vous pouvez voir un message "police non prise en charge" sur votre site. Cela se produit lorsqu'une police Adobe est utilisée, puis qu'Adobe la retire.

La plupart du temps, Squarespace le remplacera par l'alternative la plus proche. Mais sinon, vous devrez peut-être télécharger une autre police pour la remplacer.

Ma police est différente lorsque je suis connecté

Parfois, les gens remarquent que leurs polices sont différentes lorsqu'ils sont connectés et lorsqu'ils consultent le site en direct. Cela est généralement dû aux lecteurs de polices et à la façon dont ils voient le site.

Si vous remarquez cela, contactez le support Squarespace et ils pourront consulter les paramètres pour voir ce qui doit être ajusté.

Je ne peux pas définir ma police sur une taille spécifique

Les problèmes liés à la définition d'une taille spécifique pour une police sont généralement liés au backend de votre site Web. Cela peut être dû à la version de Squarespace que vous utilisez.

Alors, contactez le support pour obtenir leur aide sur ce qui pourrait ne pas fonctionner.

Ajoutez vos polices personnalisées à Squarespace

Avec une touche de CSS, vous pouvez rapidement ajouter des fichiers de police personnalisés à Squarespace.

Vous pouvez les utiliser à différents endroits avec un peu de code et tout ajuster, de la taille à l'espacement des lettres.

L'éditeur de style a facilité la personnalisation de votre site Web au-delà des options de police intégrées.

Alors, comment pourriez-vous utiliser des polices personnalisées pour rendre votre site Web encore plus intelligent ?