Tu veux que ton site reflète pleinement ton identité visuelle ? Intégrer tes polices personnalisées sur Squarespace, c’est possible, simple, et surtout ça donne une vraie touche pro et unique à ton design. Voici un guide clair, pas à pas, pour ajouter ta typographie de marque, même si tu n’es pas à l’aise avec le code.

Pourquoi ajouter une police personnalisée sur Squarespace ?

Squarespace propose de nombreuses Google Fonts intégrées, mais parfois elles ne suffisent pas à exprimer l’essence de ta marque. Si tu as déjà une identité visuelle en place, il est essentiel que ton site web la reflète parfaitement. La typographie joue un rôle majeur dans la perception de ton univers.

Utiliser une police personnalisée te permet :

• De conserver la cohérence de ta charte graphique
• D’affirmer ta singularité auprès de ton audience
• D’élever le niveau de professionnalisme perçu de ton site
• D’éviter les compromis visuels qui affaiblissent ton branding

Ajouter une police personnalisée sur Squarespace : le tuto

Ce qu’il te faut avant de commencer

• Le fichier de ta police personnalisée au format .ttf ou .otf (voire .woff et .woff2 pour plus de compatibilité navigateur)
• Une licence valide pour l’utilisation web de ta police (vérifie les conditions sur Creative Market, MyFonts ou demande directement au créateur)
• L’accès à ton site Squarespace

ÉTAPE 1 — Télécharge ta police sur Squarespace

1. Connecte-toi à ton Site web sur ton compte Squarespace
2. Va dans “Pages” > « Code personnalisé » > « CSS personnalisé ».
3. Clique sur l’onglet “Fichiers personnalisés” > “Ajouter des images ou des polices”.
4. Clique sur le + et téléverse le fichier .ttf ou .otf de ta police.

Une fois le fichier téléchargé, tu pourras simplement cliquer dessus pour obtenir l’URL d’accès : elle apparaîtra automatiquement dans le champ CSS.

ÉTAPE 2 — Ajoute ta police personnalisée avec du Code CSS

Colle ce code dans la zone CSS, en remplaçant les URLs par celle générée automatiquement via le clic sur le fichier :

@font-face {
font-family: 'MaPolice';
src: url('URL-de-ta-police.ttf') format('truetype');
}

Remplace MaPolice par le nom de ton choix, qui te servira ensuite pour identifier cette police.

Clique sur le fichier de ta police pour remplacer URL-de-ta-police.ttf

ÉTAPE 3 — Applique ta police personnalisée aux éléments de texte de ton site

Ajoute ce type de règles CSS pour définir où ta police doit apparaître :

h1, h2, h3 {
font-family: 'MaPolice';
text-transform: uppercase;
}

p {
font-family: 'MaPolice';
}

Tu peux cibler :

• h1, h2, h3, h4, h5 : pour les titres
• p : pour les paragraphes

Dans cet exemple, j’ai appliqué MaPolice aux titres h1, h2, h3 ainsi qu’au paragraphe. J’ai ajouté une variation de style à mes titres text-transform: uppercase pour qu’ils soient automatiquement en lettres majuscules

Si la police ne s’applique pas, ajoute !important à la fin de ta règle :

h1 { font-family: 'MaPolice' !important; }

ÉTAPE 4 — Tester et ajuster

• Vérifie que la police s’affiche bien sur toutes tes pages
• Teste en version mobile et tablette
• Contrôle la lisibilité et la hiérarchie visuelle

Erreurs fréquentes à éviter

• Oublier de cliquer sur le fichier pour obtenir le bon lien URL
• Ne pas utiliser le bon nom de police dans les règles CSS
• Ajouter trop de variantes ou fichiers lourds, ce qui ralentit le site
• Oublier le !important quand Squarespace écrase tes règles

FAQ — Questions fréquentes

Est-ce que je peux voir mes polices personnalisées dans les paramètres de style ?

Non, les polices personnalisées n’apparaissent pas dans le menu des Styles du site . Elles doivent être appliquées via le CSS.

Est-ce que je peux utiliser plusieurs polices personnalisées ?

Oui, mais garde une hiérarchie claire et évite de surcharger ton design.

Est-ce que je peux utiliser une Google Font avec cette méthode ?

C’est possible, mais les Google Fonts sont déjà disponibles nativement dans Squarespace.

En bref

Intégrer une police personnalisée sur Squarespace, c’est :

1. Uploader ton fichier dans le menu CSS personnalisé
2. Ajoute ta police personnalisée avec du Code CSS
3. Applique ta police aux éléments de texte de ton site
4. Tester l’affichage sur tous les écrans

C’est rapide, facile et ça change tout côté design !

Tu veux plus d’astuces Squarespace ? Abonne-toi à ma newsletter ou jeter un œil à mes services de site web sur-mesure pour créer un site internet 100% aligné avec ton univers 🙂

Tu as aimé cet article ? Enregistre-le sur Pinterest ?