Comment mettre à jour les polices dans Shopify (2026)

Points clés à retenir

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 (ex. typographies achetées) nécessitent de télécharger 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 tout votre thème sans que vous ayez à écrire le CSS.

Pour mettre à jour les polices sur Shopify, allez dans Boutique en ligne → Thèmes → Personnaliser → Paramètres du thème → Typographie et choisissez de nouvelles polices pour les titres et le corps du texte. Une police de marque achetée nécessite que ses fichiers soient téléchargés dans le thème et une courte règle @font-face.

Pourquoi vous pouvez nous faire confiance

Jacques a plus de 15 ans d’expérience en développement Shopify. Nous créons Fudge, l’opérateur IA pour les boutiques Shopify, avec une note de 4.9 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.

É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 - généralement :

Police des titres - utilisée pour les H1, H2, H3
Police du corps - utilisée pour les paragraphes, les étiquettes et le texte général

Étape 5. Cliquez sur Modifier à côté de chaque rôle de police. Un sélecteur de police s’ouvre avec la bibliothèque de 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 à toutes les pages qui utilisent les styles de titre et de corps standard de votre thème.

Pour la taille des titres, consultez Comment modifier la taille de la police des titres sur Shopify.

Quelles polices offre Shopify ?

La bibliothèque de polices intégrée de Shopify comprend :

Google Fonts - une large sélection de typographies open-source de Google, incluant 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 sous licence - des typographies commerciales que Shopify sous-licencie pour une utilisation dans les thèmes

Vous pouvez faire une recherche par nom dans le sélecteur de police. Si une Google Font n’est pas dans la liste déroulante, il se peut qu’elle ne soit pas incluse dans la bibliothèque hébergée de Shopify - vérifiez par son nom.

Si vous êtes encore en phase de décision plutôt que d’application, notre créateur de boutique Shopify par IA gratuit suggère une association typographique ainsi qu’une palette de couleurs et un design de page d’accueil pour tout ce que vous vendez.

Comment changer le style de la police ?

La taille de la police et la graisse de la police (bold, regular, light) sont généralement définies séparément de la famille de polices. Regardez dans Paramètres du thème → Typographie pour les contrôles de taille. Certains thèmes proposent des options de taille de titre “Large”, “Moyenne”, “Petite” ; d’autres donnent des valeurs en pixels.

Pour un contrôle précis de la graisse et de la taille de la 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é :

h1,
h2 {
    font-weight: 700;
    letter-spacing: -0.02em;
}

p {
    font-size: 16px;
    line-height: 1.6;
}

Pour gérer les couleurs et les polices ensemble, consultez Comment mettre à jour les couleurs et les polices sur Shopify.

Comment ajouter une police personnalisée dans Shopify

Si votre marque utilise une typographie 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 de télécharger les fichiers de police et d’écrire du CSS.

Étape 1. Obtenez les fichiers web font de votre typographie. Vous avez besoin du format .woff2 (recommandé) et .woff en solution de secours (fallback). Votre licence de police doit autoriser l’utilisation web.

Étape 2. Allez dans Boutique en ligne → Thèmes, puis le menu à trois points (…) à côté de votre thème, puis Modifier le code.

Étape 3. Sous le dossier Assets, cliquez sur Ajouter une nouvelle ressource → téléchargez vos fichiers .woff2 et .woff.

Étape 4. Ouvrez layout/theme.liquid et ajoutez la règle @font-face dans une balise <style> à l’intérieur de <head>. Liquid s’exécute dans ce fichier, donc le filtre asset_url renvoie l’URL réelle de chaque fichier de police (il n’est pas traité dans un simple fichier .css) :

<style>
    @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;
    }
</style>

Étape 5. Appliquez la police à vos éléments :

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

Ce processus nécessite d’être un peu à l’aise avec le CSS. Les erreurs ne casseront pas votre boutique, mais la police ne s’affichera pas tant que le code ne sera pas correct.

Besoin d'intégrer correctement des polices personnalisées ? Décrivez-le à Fudge.

Démarrer l'essai gratuit

Utiliser Fudge pour implémenter des polices personnalisées

Si vous souhaitez utiliser une typographie personnalisée sans toucher au code, décrivez-la à Fudge, l’opérateur IA pour les boutiques Shopify :

“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 écrit les déclarations @font-face et les assignations CSS sous forme de brouillon pour que vous puissiez les relire, afin que vous puissiez d’abord voir la nouvelle typographie sur vos vraies pages. Rien n’est mis en ligne tant que vous ne l’avez pas approuvé.

Considérations sur les performances des polices

Les polices affectent la vitesse de chargement des pages. Quelques points à garder à l’esprit :

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) est généralement le bon équilibre.

Utilisez font-display: swap. Cela indique au navigateur d’afficher le texte dans une police système pendant le chargement de la police personnalisée, plutôt que de masquer entièrement le texte. Les polices intégrées de Shopify le gèrent automatiquement. Pour les polices personnalisées, ajoutez-le à votre déclaration @font-face comme indiqué ci-dessus.

Privilégiez les polices variables (variable fonts). Les polices variables regroupent plusieurs graisses dans un seul fichier. Si votre typographie propose une version variable, utilisez-la.

Pour optimiser le reste de la vitesse de vos pages, consultez Comment accélérer un thème Shopify.

FAQ

Utiliser Google Fonts va-t-il nuire au SEO de mon Shopify ?

Marginalement si c'est mal géré. Les Google Fonts chargées via le font_picker de Shopify sont servies depuis le CDN de Shopify, de manière rapide et mise en cache — l'impact SEO est minime. Les Google Fonts chargées via des balises <link> directes depuis fonts.googleapis.com ajoutent une requête DNS supplémentaire et peuvent légèrement nuire au 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 le système de base (-apple-system) — toutes ont une forte lisibilité en petite taille. Pour les titres : cela dépend de la catégorie. Mode/beauté : polices d'affichage avec empattement ou serif (Playfair, Canela, Tiempos). Moderne/tech : sans empattement géométrique (DM Sans, Inter, Poppins). Pour la plupart des boutiques, privilégiez la lisibilité à la personnalité.

Dois-je utiliser une ou deux polices sur ma boutique Shopify ?

Deux est classique (titre + corps) — cela donne une hiérarchie visuelle sans surcharger. Une seule convient aux marques minimalistes qui jouent sur les variations de graisse et de taille. Trois ou plus est rarement justifié — cela dilue l'identité de la marque et alourdit le chargement. Si vous êtes tenté d'en utiliser trois, demandez-vous si deux ne suffiraient pas.

Puis-je n'utiliser que 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 avec zéro requête de police. Contrepartie : moins de distinction de marque, puisque les visiteurs voient les polices qu'ils retrouvent sur tous les autres sites. Certaines marques à positionnement premium utilisent volontairement les polices système pour leur vitesse et leur clarté de type "Apple".

Pourquoi ma police personnalisée Shopify clignote-t-elle au chargement initial ?

C'est ce qu'on appelle le Flash of Unstyled Text (FOUT). Le navigateur affiche la police de secours avant le chargement de la police personnalisée, puis fait l'échange. Avec font-display: swap (recommandé), l'échange a lieu mais le texte reste lisible tout du long. Sans cela, le texte peut être invisible pendant le chargement (Flash of Invisible Text — ce qui est pire). S'il manque font-display: swap à votre déclaration @font-face, décrivez la correction à Fudge et il mettra à jour la déclaration dans votre thème.