Comment ajouter une police personnalisée sur Shopify (guide complet)

Ajouter une police personnalisée à votre boutique Shopify est l’un des meilleurs moyens de renforcer votre identité de marque, d’améliorer l’apparence de votre thème et d’offrir une expérience utilisateur plus professionnelle. Une police bien choisie peut améliorer la lisibilité, la cohérence visuelle et, de manière indirecte, contribuer à de meilleures performances SEO grâce à un meilleur engagement des visiteurs.

Introduction

Dans cet article complet sur comment ajouter une police sur Shopify, vous allez découvrir, étape par étape, comment :

utiliser les polices intégrées de Shopify ;
ajouter une police personnalisée via des services externes comme Google Fonts ;
téléverser vos propres fichiers de police (WOFF, WOFF2, TTF, etc.) dans le code de votre thème ;
appliquer ces polices à des éléments précis de votre boutique (titres, corps de texte, boutons, menus, etc.).

Nous verrons également les bonnes pratiques de performance, d’accessibilité et de cohérence graphique pour éviter de ralentir votre site ou de dégrader l’expérience utilisateur.

Concepts clés à connaître avant d’ajouter une police sur Shopify

Avant de modifier la typographie de votre boutique, il est utile de comprendre quelques notions techniques de base :

Police personnalisée : police de caractères que vous choisissez vous‑même pour votre marque et qui n’est pas forcément incluse par défaut dans votre thème Shopify.
Famille de polices : ensemble de variantes d’une même police (regular, bold, italic, etc.).
CSS : langage qui permet de définir l’apparence visuelle de votre site (polices, couleurs, tailles, marges…).
@font-face : règle CSS qui permet de déclarer une police hébergée sur votre serveur ou sur un serveur externe, afin que le navigateur puisse la télécharger et l’utiliser.
Fontes externes : polices hébergées sur des plateformes comme Google Fonts, Adobe Fonts ou d’autres CDN de polices.
Thème Shopify : modèle de mise en page et de design de votre boutique, composé de fichiers Liquid, CSS et JavaScript.
Éditeur de thème : interface Shopify permettant de personnaliser le design (Boutique en ligne > Thèmes > Personnaliser).
Accessibilité typographique : capacité d’une police à rester lisible pour tous les utilisateurs, y compris sur mobile et pour les personnes ayant des troubles visuels.

La première étape consiste à choisir une police qui soit à la fois cohérente avec votre image de marque et agréable à lire sur tous les appareils. Évitez les polices trop décoratives pour les textes longs et privilégiez des polices lisibles pour les paragraphes (sans-serif ou serif lisibles à petite taille).

Options pour changer ou ajouter une police sur Shopify

Sur Shopify, vous disposez de plusieurs approches complémentaires pour gérer les polices :

Utiliser les polices natives du thème Shopify (sans toucher au code).
Intégrer une police externe (par exemple Google Fonts) via un lien et du CSS.
Téléverser vos propres fichiers de police dans Shopify et les déclarer avec @font-face dans le CSS.

Les trois méthodes peuvent coexister sur un même site, mais il est recommandé de limiter le nombre total de familles de polices pour des raisons de performance et de cohérence graphique (généralement 2 à 3 polices maximum : une pour les titres, une pour le corps de texte, éventuellement une troisième pour les accents graphiques).

Étape 1 : utiliser les polices intégrées de Shopify (méthode simple, sans code)

Si vous n’avez pas de contrainte de charte graphique très spécifique, la solution la plus simple pour changer de police sur Shopify est d’utiliser les polices déjà intégrées au thème.

Accéder aux paramètres de typographie

Pour modifier la police via l’interface Shopify :

Connectez-vous à votre tableau de bord d’administration Shopify.
Allez dans Boutique en ligne > Thèmes.
Sur le thème actif, cliquez sur Personnaliser.
Dans l’éditeur de thème, ouvrez la section Paramètres du thème (généralement en bas ou dans un menu latéral).
Cliquez sur Typographie ou un intitulé équivalent selon la langue et le thème.

Vous verrez alors des options pour choisir la police des titres, du corps de texte, parfois des boutons et des menus. Shopify propose par défaut un large catalogue de polices web sûres et optimisées. Cette méthode ne nécessite aucun code et convient à la majorité des boutiques.

Avantages de cette méthode

Aucune compétence technique nécessaire.
Mise à jour rapide et réversible.
Polices généralement bien optimisées pour le web et pour la performance.

En revanche, si votre charte graphique impose une police qui n’est pas proposée par Shopify, vous devrez recourir à l’une des méthodes suivantes.

Étape 2 : choisir et préparer une police personnalisée

Si vous souhaitez utiliser une police spécifique (par exemple celle de votre logo, une police premium ou une police téléchargée sur un site de typographies), vous devrez la préparer pour une utilisation web.

Où trouver des polices personnalisées ?

Google Fonts : bibliothèque gratuite de polices web très utilisée, simple à intégrer.
Adobe Fonts : service de polices inclus dans certains abonnements Adobe, avec intégration via script.
Sites spécialisés (Dafont, FontSquirrel, fonderies typographiques, etc.) pour des polices gratuites ou payantes.

Avant d’ajouter une police sur Shopify, vérifiez toujours :

que vous disposez de la licence nécessaire pour une utilisation web ;
les formats disponibles (WOFF, WOFF2, TTF, OTF…) ;
la présence des caractères dont vous avez besoin (accents, caractères spéciaux, symboles, etc.).

Convertir la police dans des formats adaptés au web

Pour une intégration optimale, les formats recommandés sont :

WOFF2 : format moderne, léger et performant, pris en charge par la majorité des navigateurs récents.
WOFF : bon format de secours pour les navigateurs plus anciens.

Si vous disposez uniquement d’un fichier TTF ou OTF, vous pouvez utiliser un outil de conversion en ligne fiable pour générer les versions WOFF et WOFF2, en veillant à respecter les conditions de licence de la police.

Étape 3 : téléverser vos fichiers de police sur Shopify

Pour que votre police personnalisée soit accessible au navigateur, vous devez la téléverser dans les fichiers de votre boutique Shopify.

Méthode via “Fichiers” (administration Shopify)

Dans votre interface d’administration, cliquez sur Paramètres.
Allez dans la section Fichiers.
Cliquez sur Importer des fichiers ou Ajouter des fichiers.
Sélectionnez vos fichiers de police (WOFF2, WOFF, etc.) et téléversez-les.
Une fois le téléversement terminé, récupérez l’URL de chaque fichier de police : Shopify affiche un lien que vous pouvez copier.

Ces URLs seront utilisées plus tard dans votre règle @font-face pour indiquer au navigateur où trouver la police.

Méthode via le thème (ressources du thème)

Selon la version de Shopify et la structure de votre thème, il est également possible de téléverser vos fichiers de police directement comme ressources du thème :

Allez dans Boutique en ligne > Thèmes.
Cliquez sur … > Modifier le code sur le thème que vous souhaitez modifier.
Repérez le dossier des ressources (Assets ou Ressources).
Cliquez sur Ajouter un nouveau fichier ou un bouton équivalent.
Téléversez vos fichiers de police.

Après le téléversement, vos fichiers de police se trouveront dans le dossier des ressources du thème et pourront être référencés directement dans le CSS.

Étape 4 : déclarer la police dans le CSS avec @font-face

Une fois vos fichiers de police hébergés sur Shopify, vous devez les déclarer dans le CSS de votre thème pour que le navigateur sache les charger.

Accéder au fichier CSS de votre thème

Allez dans Boutique en ligne > Thèmes.
Sur le thème actif, cliquez sur … > Modifier le code.
Dans la colonne de gauche, repérez le fichier principal de styles, par exemple base.css, theme.css, theme.scss.liquid ou un fichier équivalent.
Ouvrez ce fichier.

Le nom du fichier peut varier selon le thème (notamment entre Online Store 2.0 et les anciens thèmes), mais le principe reste le même : vous ajoutez votre règle @font-face au début du fichier ou dans un fichier de styles chargé globalement.

Exemple de règle @font-face pour Shopify

Voici un exemple de déclaration de police dans le CSS :

@font-face { font-family: 'MaPolicePersonnalisee'; src: url('URL_DE_VOTRE_POLICE.woff2') format('woff2'), url('URL_DE_VOTRE_POLICE.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap;
}

Adaptez les éléments suivants :

font-family : nom interne que vous donnez à votre police (sans espace ou avec guillemets si nécessaire). Utilisez un nom explicite, par exemple 'MaPoliceTitre' ou 'MaPoliceTexte'.
src : remplacez les URLs par celles que vous avez copiées depuis la section Fichiers ou par le chemin de vos fichiers dans Assets.
font-weight : utilisez la valeur correspondant au poids de la variante (400 pour normal, 700 pour bold, etc.).
font-style : normal, italic ou autre selon la variante.
font-display : l’option swap améliore la performance perçue en affichant une police de secours pendant que la police personnalisée se charge.

Si vous avez plusieurs variantes (regular, bold, italic), créez une règle @font-face par variante en adaptant font-weight et font-style.

Étape 5 : appliquer la police aux éléments de votre boutique

Après avoir déclaré la police, vous devez l’appliquer aux éléments souhaités via des règles CSS.

Appliquer la police aux titres et au corps de texte

Par exemple, pour appliquer votre police personnalisée aux titres h1, h2 et au corps de texte, vous pouvez ajouter :

h1, h2, h3, .h1, .h2, .h3 { font-family: 'MaPolicePersonnalisee', sans-serif;
} body { font-family: 'MaPoliceTexte', sans-serif;
}

Dans cet exemple :

'MaPolicePersonnalisee' et 'MaPoliceTexte' sont les noms déclarés dans vos règles @font-face.
sans-serif sert de police de secours si la police personnalisée ne se charge pas.

Appliquer la police à une classe spécifique (ex. titres de produits)

Si vous souhaitez appliquer une police uniquement aux titres de produits, vous pouvez :

Identifier ou créer une classe CSS pour vos titres de produits, par exemple .produit-titre.
Ajouter une règle CSS :

.produit-titre { font-family: 'MaPolicePersonnalisee', sans-serif;
}

Ensuite, dans vos templates ou dans l’éditeur de thème, veillez à ce que les titres de produits utilisent cette classe. Dans de nombreux thèmes, les sélecteurs existent déjà (par exemple .card__heading, .product-title, etc.), vous pouvez donc adapter la règle aux classes déjà présentes.

Étape 6 : utiliser Google Fonts (méthode externe courante)

Si votre police est disponible sur Google Fonts, vous pouvez l’intégrer via un lien fourni par Google, ce qui simplifie le processus.

Récupérer le code d’intégration Google Fonts

Rendez-vous sur le site de Google Fonts.
Cherchez la police qui vous intéresse.
Sélectionnez les styles (poids, italique…) que vous souhaitez utiliser.
Google fournit un code <link> ou un bloc @import pour le CSS.

Par exemple, Google propose généralement un lien du type :

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=NomDeLaPolice:wght@400;700&display=swap">

Intégrer la police Google Fonts dans votre thème Shopify

Il existe deux principales approches :

placer la balise <link> dans le fichier theme.liquid, généralement dans la balise <head> ;
ou utiliser une directive @import dans votre fichier CSS principal.

Exemple d’intégration dans theme.liquid :

Allez dans Boutique en ligne > Thèmes > … > Modifier le code.
Ouvrez le fichier layout/theme.liquid ou un équivalent qui contient la balise <head>.
Ajoutez la balise <link> fournie par Google dans la section <head>.
Enregistrez.

Ensuite, dans votre CSS, vous appliquez la police ainsi :

body { font-family: 'NomDeLaPolice', sans-serif;
}

Remplacez NomDeLaPolice par le nom exact indiqué par Google Fonts.

Étape 7 : bonnes pratiques pour les performances et le SEO

Une police mal intégrée peut ralentir le chargement de votre boutique, ce qui nuit à l’expérience utilisateur et peut indirectement impacter votre SEO. Voici quelques bonnes pratiques clés :

Limiter le nombre de polices et de variantes

Évitez d’utiliser plus de deux ou trois familles de polices sur le même site.
Limitez le nombre de variantes (par exemple regular 400, semi-bold 600, bold 700) au strict nécessaire.

Chaque variante de police ajoutée signifie un fichier supplémentaire à charger, ce qui allonge le temps de chargement, surtout sur mobile ou avec une connexion lente.

Utiliser font-display: swap

Lorsque vous déclarez votre police avec @font-face, l’utilisation de font-display: swap; permet d’éviter que le texte reste invisible (effet “flash of invisible text”) pendant le chargement de la police personnalisée. À la place, une police système est affichée immédiatement, puis remplacée par la police personnalisée dès qu’elle est disponible.

Choisir des polices lisibles et adaptées

Une police très décorative peut nuire à la lisibilité, surtout sur mobile. Pour le corps de texte, privilégiez des polices simples et testées à des tailles comprises entre environ 14 et 18 pixels selon votre design. Des textes plus lisibles incitent les visiteurs à rester plus longtemps, à lire davantage de contenu et à interagir avec votre boutique, ce qui améliore les signaux d’engagement.

Tester l’impact sur le temps de chargement

Après avoir ajouté une police personnalisée, il est recommandé de tester la vitesse de chargement de votre site avec des outils de mesure de performance. Si le temps de chargement augmente fortement, vous pouvez :

réduire le nombre de variantes de la police ;
passer à un format plus optimisé comme WOFF2 ;
ou envisager d’utiliser une police système pour certains éléments moins critiques.

Étape 8 : cohérence graphique et expérience utilisateur

Au-delà de l’aspect technique, le choix et l’intégration de la police doivent servir votre image de marque et votre conversion.

Aligner la police sur votre identité de marque

Assurez-vous que la police de votre boutique est cohérente avec celle de votre logo, de vos supports marketing et de vos réseaux sociaux.
Utilisez une hierarchie typographique claire : une police (ou une variante) pour les titres, une autre pour le texte courant, éventuellement une troisième pour les éléments d’accent (boutons, prix, labels…).

Adapter la taille et le contraste

Une bonne typographie ne se limite pas au choix de la police :

utilisez une taille suffisante pour le corps de texte, surtout sur mobile ;
assurez un contraste élevé entre le texte et l’arrière-plan ;
veillez à des espacements (interlignage, marges, padding) confortables pour la lecture.

Ces éléments contribuent directement au confort de navigation et à la compréhension de vos contenus, ce qui peut se traduire par de meilleurs taux de conversion.

Étape 9 : tests, dépannage et erreurs fréquentes

Après avoir ajouté une police personnalisée, vérifiez attentivement le rendu sur plusieurs navigateurs et appareils.

Vérifier sur différents appareils

Ordinateurs de bureau (Windows, macOS, différentes tailles d’écran).
Smartphones (Android, iOS) et tablettes.
Navigateurs principaux (Chrome, Safari, Firefox, Edge).

Assurez-vous que la police se charge correctement, que les caractères spéciaux (accents, symboles) s’affichent bien, et que les textes restent lisibles dans toutes les langues de votre boutique.

Problèmes fréquents et solutions

La police ne s’affiche pas : vérifiez le nom de la police dans @font-face et dans font-family, l’orthographe doit être exactement la même ; assurez-vous aussi que l’URL des fichiers de police est correcte.
Certains textes restent avec la police d’origine : il se peut que des sélecteurs plus spécifiques dans votre CSS écrasent vos nouvelles règles. Utilisez des sélecteurs plus précis ou vérifiez l’ordre de chargement des fichiers CSS.
Le site est plus lent : réduisez le nombre de variantes de polices, utilisez WOFF2 quand c’est possible et évitez de charger des styles inutilisés.

FAQ – Ajout de police personnalisée sur Shopify

Pourquoi ajouter une police personnalisée sur Shopify ?

Ajouter une police personnalisée permet de renforcer votre identité visuelle, de différencier votre boutique de la concurrence et d’offrir une expérience de marque plus cohérente entre votre site, votre logo et vos autres supports de communication. Une typographie maîtrisée améliore également la lisibilité de vos contenus et peut contribuer à une meilleure perception de la qualité de votre boutique.

Est-ce que l’ajout d’une police personnalisée affecte le SEO ?

La présence ou l’absence d’une police spécifique n’est pas en soi un critère direct de classement. En revanche, une typographie claire et lisible peut améliorer l’expérience utilisateur, réduire le taux de rebond, favoriser la lecture de vos contenus et augmenter le temps passé sur le site. Ces signaux d’engagement sont pris en compte de manière indirecte dans la performance globale de votre boutique.

Puis-je utiliser plusieurs polices sur ma boutique Shopify ?

Oui, vous pouvez utiliser plusieurs polices sur Shopify. Cependant, il est généralement recommandé de ne pas dépasser deux ou trois familles de polices pour maintenir un design cohérent et des performances de chargement correctes. Par exemple, une police pour les titres, une autre pour le texte courant, et éventuellement une troisième pour certains éléments d’interface.

Ai-je besoin de savoir coder pour ajouter une police personnalisée ?

Pour utiliser les polices intégrées à Shopify via les paramètres de thème, aucune compétence en code n’est nécessaire. En revanche, pour intégrer une police personnalisée qui n’est pas fournie par Shopify (fichiers WOFF/WOFF2, Google Fonts, etc.), vous devrez au minimum :

téléverser les fichiers de police ;
modifier légèrement le code CSS ;
et éventuellement ajouter un lien dans theme.liquid.

Les opérations restent relativement simples si vous suivez les étapes décrites, mais une certaine aisance avec l’interface “Modifier le code” est utile.

Puis-je revenir en arrière si quelque chose ne fonctionne pas ?

Oui. Avant de modifier le code de votre thème, il est fortement conseillé de :

dupliquer votre thème actuel pour conserver une copie de sécurité ;
documenter les changements que vous apportez (fichiers modifiés, lignes ajoutées).

En cas de problème, vous pouvez revenir à la version précédente du fichier (Shopify permet souvent de restaurer l’historique récent) ou rebasculer sur la copie du thème non modifiée.

Comment savoir si ma licence de police permet une utilisation sur Shopify ?

Avant d’ajouter une police personnalisée, consultez toujours la licence fournie par le créateur ou la fonderie :

vérifiez si l’usage web est autorisé ;
vérifiez si un hébergement sur votre propre serveur (comme Shopify) est permis ou si vous devez utiliser un service spécifique ;
assurez-vous de respecter les limites éventuelles (nombre de pages vues, domaines autorisés, etc.).

Le non-respect de la licence peut entraîner des problèmes juridiques. Il est donc important de traiter ce point avec sérieux.

Conclusion

Ajouter une police personnalisée sur Shopify est un processus accessible, mais qui demande un minimum de rigueur technique et graphique. En combinant les options natives de Shopify, les services de polices externes comme Google Fonts et l’intégration de vos propres fichiers via @font-face, vous pouvez obtenir une typographie parfaitement alignée avec votre marque.

En suivant les étapes détaillées dans ce guide — choix de la police, préparation des fichiers, téléversement sur Shopify, déclaration CSS et application aux bons éléments — vous maîtrisez l’ensemble de la chaîne, de la sélection à l’affichage final sur votre boutique. En prêtant une attention particulière à la lisibilité, aux performances et à la cohérence visuelle, vous améliorez à la fois l’expérience de vos visiteurs et la perception professionnelle de votre marque.

N’hésitez pas à tester plusieurs combinaisons de polices (tout en restant raisonnable en nombre) et à analyser l’impact sur le comportement de vos visiteurs pour trouver la solution typographique qui correspond le mieux à votre boutique Shopify et à vos objectifs.