Font picker Shopify : guide complet pour gérer les polices dans votre thème

Introduction

La personnalisation des éléments graphiques est essentielle pour créer une identité visuelle forte sur une boutique en ligne Shopify. Parmi ces éléments, les polices de caractères jouent un rôle clé dans la perception de la marque, la lisibilité et l’expérience utilisateur. Shopify propose plusieurs approches pour gérer les polices :

• le type de réglage natif font_picker dans les thèmes, qui permet de choisir une police depuis la bibliothèque de polices Shopify dans l’éditeur de thème ;
• les réglages de typographie standards accessibles dans Personnaliser > Paramètres du thème > Typographie ;
• des applications tierces (apps) qui ajoutent un sélecteur de polices (Google Fonts ou polices personnalisées) sans avoir à coder.

Cet article explique en détail ce que recouvre l’expression « font picker Shopify », comment fonctionne le réglage font_picker dans un thème, comment ajouter des polices personnalisées, quelles sont les bonnes pratiques typographiques et quels outils peuvent vous aider à optimiser l’apparence de votre boutique.

Qu’est-ce que le font picker Shopify ?

Sur Shopify, le terme « font picker » désigne principalement deux réalités :

• Le réglage de thème "type": "font_picker", qui permet à un marchand de choisir une police directement dans l’éditeur de thème parmi la bibliothèque de polices Shopify.
• Les sélecteurs de polices proposés par des applications (par exemple pour les options de produits, Google Fonts ou des fichiers de polices uploadés).

Le font picker natif fait partie de l’architecture des thèmes Shopify. Dans le fichier settings_schema.json (ou dans le bloc settings_schema selon la structure du thème), on peut définir un réglage comme :

{ "type": "font_picker", "id": "heading_font", "label": "Police des titres", "default": "work_sans_n6"
}

Une fois ce réglage ajouté, l’éditeur de thème affiche un sélecteur de polices permettant de parcourir la librairie de polices Shopify. La valeur choisie est renvoyée au thème sous forme d’objet font en Liquid, qui peut être utilisé avec les filtres de police (font_face, font_modify, etc.) pour charger la bonne police dans la feuille de style.

Concepts clés autour du font picker Shopify

Pour bien comprendre comment utiliser le font picker Shopify, il est utile de clarifier quelques notions essentielles.

• Custom fonts Shopify (polices personnalisées Shopify) :
  Ce terme désigne en pratique deux cas de figure :
  • les polices issues de la bibliothèque de polices Shopify que vous sélectionnez via le font_picker ou les paramètres de typographie ;
  • les polices que vous importez vous‑même (fichiers .woff, .woff2, .ttf, .otf) et que vous intégrez via le code du thème ou une app.
• Font customization Shopify (personnalisation des polices) :
  C’est l’ensemble du processus qui consiste à choisir, combiner et appliquer des polices à différents éléments (titres, menus, boutons, corps de texte) pour respecter votre charte graphique et améliorer la lisibilité.
• Shopify font tool (outil de gestion des polices Shopify) :
  Il ne s’agit pas d’un outil unique mais d’un ensemble de fonctionnalités :
  • l’éditeur de thème (section Typographie) ;
  • le type de réglage font_picker dans les thèmes personnalisés ;
  • les filtres Liquid de gestion des polices (font_face, font_modify, etc.).
• Shopify typography (typographie Shopify) :
  C’est l’ensemble des aspects liés aux polices et à la mise en forme du texte dans une boutique Shopify : familles de polices, graisses, tailles, interlignage, hiérarchie des titres, contrastes, etc.
• Font selection Shopify (sélection de polices Shopify) :
  C’est le processus qui consiste à choisir une police dans la librairie Shopify depuis l’éditeur de thème, ou via une app qui permet d’accéder à Google Fonts ou à vos propres fichiers de fonte.

Comment fonctionne le réglage font_picker dans un thème Shopify ?

Le réglage font_picker est conçu pour les développeurs et intégrateurs de thèmes, mais son impact est directement visible pour les marchands dans l’éditeur de thème. Voici les grandes étapes de son fonctionnement.

1. Déclaration du font picker dans settings_schema.json

Dans un thème compatible Online Store 2.0, le fichier config/settings_schema.json regroupe les paramètres globaux du thème. Pour ajouter un sélecteur de police, on déclare un bloc de réglage avec le type font_picker :

{ "name": "Typographie", "settings": [ { "type": "font_picker", "id": "heading_font", "label": "Police des titres", "default": "work_sans_n6" }, { "type": "font_picker", "id": "body_font", "label": "Police du corps de texte", "default": "work_sans_n4" } ]
}

Les propriétés les plus importantes sont :

• type : doit être exactement "font_picker".
• id : identifiant utilisé ensuite dans le code Liquid pour récupérer la police.
• label : intitulé visible par le marchand dans l’éditeur de thème.
• default : police par défaut, issue de la librairie Shopify (par exemple work_sans_n6 pour Work Sans bold).

2. Sélection de la police dans l’éditeur de thème

Une fois le réglage enregistré, rendez-vous dans Personnaliser puis dans l’onglet Paramètres du thème > Typographie. Vous verrez apparaître les champs associés aux IDs que vous avez définis, chacun proposant :

• un aperçu des polices disponibles ;
• un champ de recherche pour filtrer par nom de police ;
• un bouton pour charger davantage de polices de la bibliothèque Shopify.

Le marchand peut alors choisir rapidement des polices professionnelles, avec la gestion de la licence assurée par Shopify, sans avoir à manipuler de fichiers de fonte.

3. Utilisation de l’objet font en Liquid

Le font_picker ne renvoie pas simplement un nom de police brut : il fournit un objet font accessible en Liquid via settings.. Par exemple :

{% assign heading_font = settings.heading_font %}

Une fois l’objet récupéré, on peut l’utiliser avec les filtres de police pour générer les déclarations @font-face et appliquer la bonne famille de police, la bonne graisse et le bon style.

4. Chargement de la police dans la feuille de style

Pour que la police soit effectivement chargée par le navigateur, il faut l’injecter dans la feuille de style. On crée généralement un fichier de styles Liquid (par exemple theme-fonts.liquid ou un bloc de styles dans theme.liquid) contenant :

{% assign heading_font = settings.heading_font %}
{% assign body_font = settings.body_font %} {% style %} {{ heading_font | font_face }} {{ body_font | font_face }} :root { --font-heading-family: {{ heading_font.family }}; --font-heading-style: {{ heading_font.style }}; --font-heading-weight: {{ heading_font.weight }}; --font-body-family: {{ body_font.family }}; --font-body-style: {{ body_font.style }}; --font-body-weight: {{ body_font.weight }}; }
{% endstyle %}

On peut ensuite utiliser ces variables CSS dans les différentes parties du thème :

h1, h2, h3, .h1, .h2, .h3 { font-family: var(--font-heading-family); font-weight: var(--font-heading-weight); font-style: var(--font-heading-style);
} body { font-family: var(--font-body-family); font-weight: var(--font-body-weight); font-style: var(--font-body-style);
}

5. Gestion des variantes avec font_modify

Si vous avez besoin de variantes (par exemple italique ou bold pour les titres), le filtre font_modify permet d’ajuster style et poids à partir de la police principale choisie :

{% assign heading_font_bold = heading_font | font_modify: 'weight', '700' %}
{% assign heading_font_italic = heading_font | font_modify: 'style', 'italic' %} {% style %} {{ heading_font_bold | font_face }} {{ heading_font_italic | font_face }}
{% endstyle %}

Cela garantit que les bonnes ressources de police sont chargées pour chaque usage, tout en laissant au marchand la liberté de choisir la famille principale.

Polices personnalisées et font picker Shopify

Le font picker natif est conçu pour fonctionner avec la librairie de polices Shopify. Pour des polices non incluses dans cette librairie (polices propriétaires, polices d’agence, etc.), plusieurs stratégies sont possibles.

1. Limites du font_picker pour les polices externes

Le réglage font_picker ne permet pas d’ajouter directement des polices externes à la librairie Shopify. Si vous avez une police spécifique qui n’apparaît pas dans la liste, elle ne sera pas accessible via ce sélecteur. Dans ce cas, Shopify recommande plutôt d’utiliser :

• un réglage de type select ou text dans le schéma du thème, pour choisir parmi une liste de valeurs correspondant à vos polices personnalisées ;
• des fichiers de fontes téléversés dans les assets du thème ou via une app, puis référencés en @font-face dans votre CSS.

2. Formats de polices pris en charge

Pour garantir une bonne compatibilité entre les navigateurs modernes, les formats de polices couramment utilisés pour Shopify et pour la plupart des applications de typographie sont :

• .woff
• .woff2
• .ttf
• .otf

Le format .woff2 est généralement privilégié pour ses performances, mais il est courant de fournir au moins un fallback en .woff.

3. Utilisation d’apps de font picker (Google & custom fonts)

Si vous ne souhaitez pas modifier le code de votre thème, plusieurs apps de l’App Store Shopify proposent un font picker visuel compatible avec Google Fonts et/ou des polices personnalisées que vous téléversez :

• des apps de type « Font Picker (Google & Custom Fonts) » qui permettent de choisir n’importe quelle police de Google Fonts et de l’appliquer à des sélecteurs CSS spécifiques ;
• des apps comme Fontify et d’autres solutions similaires, qui gèrent pour vous l’hébergement des polices, les déclarations @font-face et l’application sur votre thème.

Ces apps offrent souvent une interface simple où vous :

• sélectionnez la police voulue dans un menu déroulant ;
• décidez où l’appliquer (titres, menus, boutons, body, sections spécifiques) ;
• prévisualisez le résultat avant de publier.

Bonnes pratiques pour utiliser le font picker Shopify

Choisir une police ne se limite pas à un simple choix esthétique. Pour tirer pleinement parti du font picker Shopify, il est important de combiner considérations graphiques, ergonomie et performance.

Optimiser la lisibilité et l’accessibilité

Lors du choix des polices, priorisez toujours la lisibilité. Quelques recommandations :

• Privilégiez une police sans empattement (sans‑serif) claire pour le corps de texte, surtout sur mobile.
• Évitez les polices trop décoratives pour les paragraphes longs : elles peuvent fatiguer l’œil et augmenter le taux de rebond.
• Vérifiez le contraste entre la couleur du texte et l’arrière-plan pour maintenir une bonne accessibilité.
• Assurez‑vous que les tailles de police restent confortables (en particulier pour le corps de texte et les boutons principaux).

Structurer une hiérarchie typographique claire

Une bonne hiérarchie typographique améliore la compréhension du contenu et guide l’utilisateur naturellement dans son parcours. Pour cela :

• définissez des styles distincts pour les titres de niveau 1 à 3, les sous‑titres et le corps de texte ;
• gardez une cohérence sur l’ensemble du site : les titres de même niveau doivent toujours utiliser la même famille de police et des tailles cohérentes ;
• limitez le nombre total de polices différentes : en général, une police pour les titres et une pour le corps suffisent.

Grâce au font_picker, vous pouvez proposer au marchand un champ de sélection pour la police des titres et un autre pour la police du corps, tout en conservant une structure CSS bien hiérarchisée.

Équilibrer esthétique et performance

Chaque police supplémentaire implique un temps de chargement. Quelques principes utiles :

• limitez le nombre de familles de polices chargées simultanément ;
• évitez de charger trop de variantes (400, 500, 600, 700, italique, etc.) si elles ne sont pas indispensables ;
• testez vos performances après avoir modifié les polices, en particulier sur mobile et dans des conditions de connexion moyenne.

Le font picker Shopify permet de tester rapidement différentes polices : évitez néanmoins de changer trop souvent de typographie une fois que votre boutique est en production, afin de conserver une identité visuelle stable.

Assurer la cohérence avec la charte de marque

La typographie doit être en phase avec le positionnement de votre marque.

• Pour une marque premium ou institutionnelle, privilégiez une police sobre, élégante, avec une bonne finesse des lettres.
• Pour une marque jeune ou créative, vous pouvez opter pour une police plus expressive, tout en restant lisible.
• Si votre entreprise possède déjà une charte graphique, essayez d’utiliser soit la police officielle, soit une police de la librairie Shopify qui s’en rapproche.

Outils et ressources utiles autour de la typographie Shopify

En complément du font picker Shopify, plusieurs outils peuvent vous aider à concevoir, tester et optimiser votre système typographique.

Éditeur de thème Shopify

L’éditeur de thème reste l’outil central pour gérer vos polices lorsque vous utilisez le font picker ou les paramètres de typographie natifs. Vous y accédez depuis votre interface d’administration :

• Ouvrez Boutique en ligne > Thèmes.
• Cliquez sur Personnaliser sur le thème de votre choix.
• Allez dans Paramètres du thème > Typographie.
• Sélectionnez les polices pour les titres, le texte principal, les boutons, etc.

Outils de design (Figma, Sketch, etc.)

Avant d’implémenter vos choix de polices dans Shopify, il peut être utile de les tester sur un prototype dans un outil de design.

• Figma permet de créer des systèmes de styles complets (text styles) avec différentes tailles, graisses et variantes. Vous pouvez ensuite reproduire ces styles dans Shopify à l’aide du font picker et de votre CSS.
• D’autres outils comme Sketch ou Adobe XD remplissent le même rôle pour préparer votre hiérarchie typographique.

Ressources de polices externes

Lorsque vous utilisez une app de font picker ou que vous ajoutez des polices personnalisées, vous pouvez puiser dans diverses bibliothèques de polices :

• Google Fonts : une vaste collection de polices gratuites largement utilisée et bien intégrée dans de nombreuses apps Shopify.
• Bibliothèques professionnelles : certaines solutions de typographie proposent des bibliothèques payantes avec des licences adaptées au web.

Assurez‑vous toujours que la licence de la police autorise l’usage web et, le cas échéant, l’hébergement sur votre propre serveur ou via l’app que vous utilisez.

Outils d’analyse et de suivi

Le choix de vos polices peut avoir un impact indirect sur vos performances et votre SEO. Pour mesurer cet impact :

• Utilisez un outil d’analytics (par exemple Google Analytics) pour suivre les indicateurs d’engagement (temps passé sur la page, taux de rebond, conversion) avant et après un changement typographique.
• Exploitez des outils d’inspection des performances (comme les audits de performance disponibles dans votre navigateur) pour vérifier que le chargement des polices reste raisonnable.

Font picker Shopify et personnalisation des produits

Le font picker Shopify ne sert pas uniquement à styliser le thème global de votre boutique. Certaines apps de personnalisation de produits proposent également un sélecteur de polices dédié aux options de personnalisation (texte gravé, broderie, impression sur mesure, etc.).

Principe général

Dans ce type de configuration :

• l’app ajoute un champ de texte sur la page produit (par exemple pour saisir un prénom ou un message) ;
• un sélecteur de police permet au client de choisir la typographie dans laquelle le texte personnalisé sera rendu ;
• le rendu final est soit prévisualisé directement sur la page, soit communiqué au marchand via les détails de la commande.

Ce mécanisme fonctionne de manière similaire au font picker de thème, mais il est généralement propre à l’app et à la logique de personnalisation du produit, plutôt qu’au thème global.

FAQ sur le font picker Shopify

• Qu’est‑ce qu’un font picker sur Shopify ?

Sur Shopify, un font picker est un outil de sélection de polices. Il peut s’agir du réglage de thème font_picker intégré à l’éditeur de thème, ou d’un sélecteur proposé par une app pour choisir des polices (par exemple Google Fonts) sans coder.

• Le font picker permet‑il d’ajouter n’importe quelle police ?

Le font picker natif du thème donne accès à la bibliothèque de polices Shopify. Pour des polices extérieures à cette bibliothèque (police propriétaire ou police fournie par votre agence), vous devrez soit utiliser une app spécialisée, soit les intégrer manuellement via le code du thème et un autre type de réglage (select, texte, etc.).

• Comment utiliser le Shopify font tool dans l’éditeur de thème ?

Ouvrez votre éditeur de thème depuis le panneau d’administration, puis allez dans Paramètres du thème > Typographie. Vous pourrez alors choisir vos polices pour les différents éléments (titres, corps, boutons) en utilisant les champs fournis par le thème, y compris ceux créés avec un font_picker.

• Quelles sont les bonnes pratiques pour la typographie sur Shopify ?

Les bonnes pratiques incluent : privilégier la lisibilité, utiliser une hiérarchie claire entre titres et corps de texte, limiter le nombre de polices et de variantes, assurer un bon contraste de couleur, et vérifier l’impact sur les performances de chargement.

• Puis‑je utiliser Google Fonts avec Shopify ?

Oui. Vous pouvez soit utiliser une app qui intègre Google Fonts et propose un font picker visuel, soit intégrer manuellement Google Fonts dans le code de votre thème (par exemple en ajoutant les liens nécessaires dans theme.liquid et en les appliquant via votre CSS). Dans ce second cas, le font_picker natif ne les affichera pas automatiquement, sauf si la police fait aussi partie de la librairie Shopify.

• Comment ajouter ma propre police personnalisée à un thème Shopify ?

Vous pouvez téléverser vos fichiers de polices (.woff, .woff2, .ttf, .otf) dans les assets du thème, déclarer des règles @font-face dans votre feuille de style, puis utiliser ces polices dans votre CSS. Pour offrir un choix au marchand, utilisez un réglage de type select ou text pour sélectionner la police à appliquer.

• Le font picker Shopify influence‑t‑il le référencement naturel ?

Indirectement, oui. Un système typographique lisible, cohérent et performant peut améliorer l’expérience utilisateur, ce qui se répercute sur des signaux comme le temps passé sur la page ou le taux de rebond. En revanche, le simple fait d’utiliser un font picker ne modifie pas directement votre positionnement dans les moteurs de recherche.

Conclusion

Maîtriser le font picker Shopify et plus largement la typographie de votre thème est un levier essentiel pour renforcer votre identité de marque et améliorer l’expérience utilisateur. Le réglage font_picker permet aux marchands de choisir facilement des polices issues de la bibliothèque Shopify, tandis que les apps et l’intégration manuelle offrent des solutions pour aller plus loin avec des polices personnalisées ou Google Fonts.

En combinant un choix de polices pertinent, une hiérarchie typographique claire et une mise en œuvre technique propre (filtres de police, formats adaptés, gestion des variantes), vous obtenez une boutique Shopify à la fois esthétique, lisible et performante. Que vous soyez marchand, intégrateur ou développeur de thèmes, exploiter pleinement le font picker et les outils typographiques de Shopify vous aidera à proposer une boutique cohérente, professionnelle et alignée avec l’image de votre marque.