Comment mettre à jour les polices dans Shopify (2026)

Points clés

Les polices Shopify se modifient dans l’éditeur de thème, sous Paramètres du thème → Typographie (Typography).

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 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.

La typographie définit l’identité de votre marque avant même qu’un visiteur ne lise un seul mot. Mettre à jour les polices sur Shopify est simple pour la bibliothèque standard, et faisable mais plus complexe pour les typographies 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 boutique IA utilisé par des centaines de boutiques Shopify, noté 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 (Headings) - utilisée pour H1, H2, H3
Police du corps de texte (Body) - utilisée pour les paragraphes, les étiquettes et le texte en 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 sélectionné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 à toutes les pages qui utilisent les styles standard de titre et de corps de votre thème.

Article lié : Éditeur de boutique Fudge.

Article lié : Modifier la taille de police des titres sur Shopify.

Quelles polices offre Shopify ?

Si vous en êtes encore à faire vos choix plutôt qu’à les appliquer, notre constructeur de boutique Shopify par IA gratuit vous suggère une combinaison de typographies, une palette de couleurs et un design de page d’accueil, peu importe ce que vous vendez.

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

Google Fonts - la collection complète des typographies open-source de Google, y compris 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 chercher par nom dans le sélecteur de police. 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 la police (font size) et la graisse de la police (font weight : 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 tailles de titre sous forme d’options “Large”, “Medium”, “Small” ; d’autres utilisent 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é est nécessaire. Ajoutez-le dans Paramètres du thème → CSS personnalisé :

Article lié : Mettre à jour les couleurs et les polices sur 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 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 d’importer des fichiers de police et d’écrire du CSS.

Étape 1. Obtenez les fichiers de police web pour votre typographie. Vous avez besoin du format .woff2 (recommandé) et .woff comme solution de repli. La licence de votre police doit autoriser l’utilisation sur le web.

Étape 2. Allez dans Boutique en ligne → Thèmes → Actions → Modifier le code.

Étape 3. Dans le dossier Assets (Ressources), cliquez sur Ajouter une nouvelle ressource → 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 d’être un peu à l’aise 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.

Besoin d'intégrer proprement des polices personnalisées ? Demandez à Fudge.

Try Fudge for Free

Article lié : Mettre à jour les couleurs de la marque sur 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

L'utilisation de Google Fonts va-t-elle nuire au SEO de mon Shopify ?

Légèrement si c'est mal géré. Les Google Fonts chargées via le font_picker de Shopify sont servies depuis le CDN de Shopify, rapides et mises en cache — impact SEO minime. Les Google Fonts chargées via des balises <link> directes depuis fonts.googleapis.com ajoutent une requête DNS supplémentaire et peuvent nuire légèrement au LCP. Utilisez le sélecteur de police de Shopify quand c'est possible.

Quelle est la meilleure police pour l'e-commerce ?

Pour le corps du texte : Inter, Söhne ou la pile système (-apple-system) — toutes offrent une grande lisibilité en petite taille. Pour les titres : cela dépend de la catégorie. Mode/beauté : polices serif (Playfair, Canela, Tiempos). Moderne/tech : sans-serif géométriques (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 typique (titre + corps) — cela donne une hiérarchie visuelle sans surcharger. Une seule est très bien pour les marques minimalistes qui jouent sur les variations d'épaisseur/taille. Trois ou plus est rarement justifié — cela dilue l'identité de la marque et alourdit le temps de chargement. Si vous êtes tenté d'en utiliser trois, demandez-vous 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 sans aucune requête de police. Le compromis : moins de distinction pour la marque, puisque les visiteurs voient des polices qu'ils voient sur tous les autres sites. Certaines marques au positionnement premium utilisent délibérément des polices système pour la vitesse et la clarté "à la Apple".

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

C'est le FOUT (Flash of Unstyled Text). Le navigateur affiche une police de secours avant que la police personnalisée ne charge, puis l'échange. Avec font-display: swap (recommandé), l'échange se produit 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). Si votre déclaration @font-face n'a pas font-display: swap, décrivez la correction à Fudge et il mettra à jour la déclaration dans votre thème.