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.

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.

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

Try Fudge for Free

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 des pages. Voici quelques points à garder en tête :

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 avec une police système pendant que la police personnalisée charge, 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 illustré ci-dessus.

Privilégiez les polices variables (variable fonts). Les polices variables regroupent plusieurs graisses en un seul fichier. Si votre police de caractères propose une version variable, utilisez-la.