Ajouter une police personnalisée à un site Squarespace : tuto complet

Vous voulez que votre site reflète pleinement votre identité visuelle ? Intégrer vos polices personnalisées sur Squarespace, c’est possible, simple, et surtout ça donne une vraie touche pro et unique à votre design. Voici un guide clair, pas à pas, pour ajouter votre typographie de marque, même si vous n’êtes 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 votre marque. Si vous avez déjà une identité visuelle en place, il est essentiel que votre site web la reflète parfaitement. La typographie joue un rôle majeur dans la perception de votre univers.

Utiliser une police personnalisée vous permet :

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

Ajouter une police personnalisée sur Squarespace : le tuto

Ce qu’il vous faut avant de commencer

• Le fichier de votre 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 votre police (vérifiez les conditions sur Creative Market, MyFonts ou demandez directement au créateur)
• L’accès à votre site Squarespace

ÉTAPE 1 — Téléchargez votre police sur Squarespace

1. Connectez-vous à votre Site web sur votre compte Squarespace
2. Allez dans “Pages” > “Code personnalisé” > “CSS personnalisé”.
3. Cliquez sur l’onglet “Fichiers personnalisés” > “Ajouter des images ou des polices”.
4. Cliquez sur le + et téléversez le fichier .ttf ou .otf de votre police.

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

ÉTAPE 2 — Ajoutez votre police personnalisée avec du Code CSS

Collez 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-votre-police.ttf') format('truetype');
}

Remplacez MaPolice par le nom de votre choix, qui vous servira ensuite pour identifier cette police.

Cliquez sur le fichier de votre police pour remplacer URL-de-votre-police.ttf

ÉTAPE 3 — Appliquez votre police personnalisée aux éléments de texte de votre site

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

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

p {
font-family: 'MaPolice';
}

Vous pouvez 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, ajoutez !important à la fin de votre règle :

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

ÉTAPE 4 — Tester et ajuster

• Vérifiez que la police s’affiche bien sur toutes vos pages
• Testez en version mobile et tablette
• Contrôlez 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 vos 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 gardez une hiérarchie claire et évitez de surcharger votre 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 votre fichier dans le menu CSS personnalisé
2. Ajoutez votre police personnalisée avec du Code CSS
3. Appliquez votre police aux éléments de texte de votre site
4. Tester l’affichage sur tous les écrans

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

Vous voulez plus d’astuces Squarespace ? Abonnez-vous à ma newsletter ou jetez un œil à mes services de site web sur-mesure pour créer un site internet 100% aligné avec votre univers 🙂

---

Vous avez aimé cet article ? Enregistrez-le sur Pinterest ?