Points clés
- Les polices Shopify se modifient dans l’éditeur de thème sous Paramètres du thème → Typographie.
- Shopify propose une bibliothèque de polices sélectionnées, incluant les Google Fonts et les polices système.
- Les polices de marque personnalisées (par ex. les polices achetées) nécessitent d’importer les fichiers de police dans le dossier assets de votre thème et d’ajouter du CSS.
- Fudge peut implémenter des polices personnalisées sur l’ensemble de votre thème sans que vous n’ayez à écrire le CSS.
La typographie façonne la perception de votre marque avant même qu’un visiteur ne lise le moindre mot. La mise à jour des polices dans Shopify est simple pour la bibliothèque par défaut - et possible, bien que plus complexe, pour les polices personnalisées.
Pourquoi vous pouvez nous faire confiance
Jacques a plus de 15 ans d’expérience en développement Shopify. Nous avons créé Fudge — un éditeur de vitrine IA utilisé par des centaines de boutiques Shopify, avec une note de 5,0 sur le Shopify App Store.
Comment changer les polices dans Shopify
Étape 1. Allez dans Boutique en ligne → Thèmes → Personnaliser.
Étape 2. Dans la barre latérale gauche, faites défiler vers le bas et cliquez sur Paramètres du thème (Theme settings).
Étape 3. Cliquez sur Typographie (certains thèmes l’appellent « Polices »).
Étape 4. Vous verrez des sélecteurs de polices pour différents rôles de texte, typiquement :
- Police des titres (Headings font) - utilisée pour H1, H2, H3
- Police du corps (Body font) - utilisée pour les paragraphes, les étiquettes et le texte en général
Étape 5. Cliquez sur Modifier (Change) à côté de chaque rôle. Un sélecteur de police s’ouvre avec la bibliothèque proposée par Shopify.
Étape 6. Parcourez ou recherchez une police. Cliquez sur l’une d’elles pour la prévisualiser. Lorsque vous êtes satisfait, cliquez sur Sélectionner.
Étape 7. Enregistrez.
Le changement de police s’applique à l’ensemble des pages utilisant les styles de titre et de corps standards de votre thème.
Article connexe : Fudge Store Editor.
Article connexe : Changer la taille de police des titres dans Shopify.
Quelles polices offre Shopify ?
La bibliothèque de polices intégrée de Shopify comprend :
- Google Fonts - la collection complète de polices open source de Google, incluant des choix populaires comme Inter, Poppins, Playfair Display et DM Sans.
- Polices système - des polices natives de l’OS comme -apple-system, Arial et Georgia qui se chargent instantanément sans aucune requête externe.
- Polices sélectionnées par Shopify - une sélection mise en avant par Shopify pour un usage e-commerce.
Vous pouvez rechercher par nom dans le sélecteur de polices. Si une Google Font n’est pas dans le menu déroulant, elle n’est peut-être pas incluse dans la bibliothèque hébergée par Shopify - vérifiez par son nom.
Comment changer le style de la police ?
La taille de police et la graisse de police (bold, regular, light) sont généralement définies séparément de la famille de polices. Cherchez dans Paramètres du thème → Typographie pour les contrôles de taille. Certains thèmes présentent la taille des titres avec des options « Large », « Medium », « Small » ; d’autres utilisent des valeurs en pixels.
Pour un contrôle plus précis de la graisse et de la taille de police sur des éléments spécifiques, du CSS personnalisé (custom CSS) est nécessaire. Ajoutez-le dans Paramètres du thème → CSS personnalisé :
Article connexe : Mettre à jour les couleurs et les polices dans Shopify.
h1, h2 {
font-weight: 700;
letter-spacing: -0.02em;
}
p {
font-size: 16px;
line-height: 1.6;
}Comment ajouter une police personnalisée dans Shopify
Si votre marque utilise une police qui n’est pas dans la bibliothèque de Shopify - une police achetée comme GT Walsheim, Canela ou Neue Haas Grotesk - le processus implique d’importer les fichiers de police et d’écrire du CSS.
Étape 1. Obtenez les fichiers web pour votre police. Vous avez besoin du format .woff2 (recommandé) et .woff comme solution de repli (fallback). La licence de votre police doit autoriser une utilisation web.
Étape 2. Allez dans Boutique en ligne → Thèmes → Actions → Modifier le code.
Étape 3. Sous le dossier Assets, cliquez sur Ajouter un nouveau composant (Add a new asset) → importez vos fichiers .woff2 et .woff.
Étape 4. Ouvrez assets/base.css (ou le fichier CSS principal de votre thème) et ajoutez une déclaration @font-face :
@font-face {
font-family: 'YourFontName';
src: url('{{ "your-font.woff2" | asset_url }}') format('woff2'),
url('{{ "your-font.woff" | asset_url }}') format('woff');
font-weight: 400;
font-display: swap;
}Étape 5. Appliquez la police à vos éléments :
body {
font-family: 'YourFontName', sans-serif;
}Ce processus nécessite une certaine aisance avec le CSS. Des erreurs ne casseront pas votre boutique, mais la police ne s’affichera pas tant que le code ne sera pas correct.
Article connexe : Mettre à jour les couleurs de la marque dans Shopify.
Utiliser Fudge pour implémenter des polices personnalisées
Si vous souhaitez utiliser une police personnalisée sans retoucher au code, décrivez-la à Fudge :
« Implémente notre police de marque GT Walsheim sur les titres et utilise Inter pour le corps du texte. Les fichiers de police sont dans notre dossier assets. »
Fudge rédige les déclarations @font-face et les attributions CSS sous forme de brouillon pour votre révision. Rien ne sera en ligne tant que vous ne l’aurez pas approuvé.
Considérations sur les performances des polices
Les polices affectent la vitesse de chargement de la page. Quelques points à retenir :
Limitez les familles de polices. Chaque famille de polices distincte charge un fichier séparé. Deux familles (une pour les titres, une pour le corps du texte) constituent généralement le bon équilibre.
Utilisez font-display: swap. Cela indique au navigateur d’afficher le texte avec une police système pendant le chargement de la police personnalisée, plutôt que de le masquer entièrement. Les polices intégrées de Shopify gèrent cela automatiquement. Pour les polices personnalisées, ajoutez-le à votre déclaration @font-face comme illustré ci-dessus.
Privilégiez les polices variables (variable fonts). Les polices variables regroupent plusieurs graisses en un seul fichier. Si votre typographie propose une version variable, utilisez-la.
FAQ
Utiliser Google Fonts va-t-il nuire à mon SEO sur Shopify ?
À la marge, en cas de mauvaise configuration. Les Google Fonts chargées via le font_picker de Shopify sont servies depuis le CDN de Shopify, c’est rapide et mis en cache — l’impact SEO est minime. Les Google Fonts chargées via des balises <link> directes depuis fonts.googleapis.com ajoutent une résolution DNS supplémentaire et peuvent dégrader légèrement le LCP. Utilisez le sélecteur de polices de Shopify quand c’est possible.
Quelle est la meilleure police pour le e-commerce ?
Pour le corps du texte : Inter, Söhne ou la system-stack (-apple-system) — elles offrent toutes une excellente lisibilité en petite taille. Pour les titres : ça dépend de la catégorie. Mode/beauté : polices serif (Playfair, Canela, Tiempos). Moderne/tech : polices sans serif géométriques (DM Sans, Inter, Poppins). Pour la plupart des boutiques, priorisez la lisibilité plutôt que la personnalité.
Dois-je utiliser une ou deux polices sur ma boutique Shopify ?
Deux est la norme (titres + corps) — cela offre une hiérarchie visuelle sans surcharger. Une seule convient très bien aux marques minimalistes qui jouent plutôt sur les variations de graisses/tailles. En utiliser trois ou plus est rarement justifié — ça dilue l’identité de la marque et alourdit le chargement. Si vous êtes tenté d’en utiliser trois, demandez-vous d’abord si deux ne suffiraient pas.
Puis-je utiliser uniquement des polices système sur Shopify ?
Oui, et c’est la configuration la plus rapide possible — les polices système (-apple-system, Segoe UI, Helvetica Neue) se chargent instantanément et ne nécessitent aucune requête réseau. Le compromis : moins de singularité pour votre marque, car les visiteurs verront les mêmes polices que sur n’importe quel autre site. Certaines marques premium utilisent délibérément les polices système pour leur vitesse et leur clarté « à la Apple ».
Pourquoi ma police Shopify personnalisée clignote-t-elle au premier chargement ?
C’est le Flash of Unstyled Text (FOUT). Le navigateur affiche une police de secours (fallback) avant de charger la police personnalisée, puis fait l’échange (swap). Avec font-display: swap (recommandé), le remplacement se fait mais le texte reste lisible tout au long du processus. Sans cela, le texte pourrait être invisible pendant le chargement (Flash of Invisible Text — ce qui est pire). Si la mention font-display: swap manque à votre déclaration @font-face, demandez à Fudge de corriger ça et il mettra à jour la déclaration dans votre thème.
Article connexe : Accélérer un thème Shopify.