Détecteur de polices Shopify : trouver les polices d’une boutique

Ce que révèle réellement un détecteur de polices Shopify

Un détecteur de polices Shopify n’est pas un bouton unique. La bonne méthode dépend de votre accès à l’administration, à l’éditeur du thème, au code de la page ou seulement à une capture. Shopify peut charger une police de sa bibliothèque, une police système, un service tiers ou un fichier du thème; ces sources ne laissent pas les mêmes indices. Un détecteur de polices Shopify doit donc être associé à une preuve du rendu.

Si vous gérez la boutique, commencez par l’éditeur du thème. Les titres et le texte courant peuvent utiliser des familles différentes et une section peut remplacer le réglage global. Notez la famille, le style et le poids, pas seulement le nom affiché.

Pour une boutique que vous observez, le HTML et le CSS publics donnent la police calculée, la taille, le poids, l’interligne et les solutions de repli. Cette preuve est souvent plus précise qu’une comparaison d’image.

La détection visuelle est utile pour un logo, une bannière, une photo ou un visuel social aplati. Elle propose des familles proches, mais ne prouve pas la police du thème. Comparez les formes, l’espacement, la licence et le contexte d’utilisation. Ce détecteur de polices Shopify complète cette vérification lorsque le texte est une image.

Une bonne réponse doit être vérifiable : origine du nom, éléments concernés, face réellement téléchargée et droit de réutilisation. Séparer ces questions évite de transformer une ressemblance en décision de production. Gardez le résultat du détecteur de polices Shopify avec l’URL et la date.

Vérifier les polices dans l’éditeur de thème Shopify

Dans les thèmes actuels, les contrôles globaux se trouvent généralement dans Paramètres du thème, même si le libellé varie. Une section ou un bloc peut appliquer une règle plus précise, ce qui explique une différence entre l’aperçu et une page particulière.

Avant de modifier, observez la navigation, les titres de produits, les boutons, les prix et le pied de page. Une boutique peut employer une famille pour les titres, une autre pour le corps et une troisième pour les boutons.

Testez une copie ou un thème brouillon. Une nouvelle police change les retours à la ligne, la hauteur des cartes et la quantité de contenu visible. Vérifiez aussi un écran mobile.

La liste proposée est également une limite de licence. Si la famille souhaitée n’est pas disponible, vérifiez ses conditions et son mode de chargement avant d’ajouter un fichier.

1. Dans l’admin, ouvrez Boutique en ligne puis Thèmes et cliquez sur Personnaliser.
2. Ouvrez Paramètres du thème et cherchez Typographie ou Polices.
3. Lisez séparément Titres et Corps; notez famille, style, poids et taille.
4. Contrôlez une page produit et une collection pour repérer les exceptions de section.
5. Prévisualisez ordinateur et mobile avant d’enregistrer, y compris les scripts nécessaires.

Inspecter une boutique Shopify publique

Sans accès à l’admin, la boutique publiée offre encore des preuves. Attendez le chargement des fontes et inspectez la page qui vous intéresse : accueil, produit et blog peuvent employer des règles différentes.

Choisissez un vrai nœud de texte, par exemple un titre de produit. Faites un clic droit puis Inspecter. Dans les styles calculés, cherchez font-family, font-size, font-weight et font-style.

Le premier nom de la pile est préféré, mais un glyphe manquant ou un téléchargement bloqué peut déclencher un remplacement. Le panneau Styles permet de retrouver le sélecteur et la feuille CSS.

Répétez sur un titre, un paragraphe, un bouton et un prix. Une extension accélère la collecte, mais la vue des polices ou le panneau Network donne une preuve plus complète.

1. Ouvrez l’URL publique et attendez la fin du chargement des textes et des polices.
2. Inspectez un texte et vérifiez qu’il ne s’agit pas d’une image.
3. Dans Calculé, copiez toute la valeur font-family et les replis génériques.
4. Lisez le poids, le style, l’interligne et la taille pour expliquer l’apparence.
5. Utilisez la vue Fonts si votre navigateur la propose afin de vérifier la face utilisée.

Vérifier la face affichée

Une déclaration CSS indique une intention. Comparez une lettre distinctive, un chiffre et un caractère accentué ou non latin; notez séparément toute substitution.

Gérer les polices personnalisées

Un thème peut charger une fonte WOFF ou WOFF2 avec @font-face et lui donner un nom différent de celui du fichier. Le nom visible dans CSS n’est donc pas toujours celui que le designer attend.

Dans Network, filtrez les requêtes Font pour confirmer le fichier téléchargé. Les graisses et italiques peuvent avoir des sources différentes. Le code Liquid et les règles de base.css ou d’une section peuvent aussi remplacer le réglage global.

Pour votre boutique, préférez le réglage pris en charge. Si vous ajoutez une fonte, consignez licence, format, poids, style, couverture Unicode et coût de chargement. Une identification exacte n’autorise pas automatiquement la redistribution.

• Famille et fichier: Comparez le nom de @font-face, celui du sélecteur et le nom du fichier.
• Poids et style: Vérifiez 400, 500, 600, 700, italique et axes variables; le faux gras change le rendu.
• Couverture: Testez les accents, l’arabe, le japonais ou le coréen si votre boutique les utilise.
• Droit et performance: Utilisez une source autorisée et mesurez le coût de téléchargement.

Choisir la bonne méthode d’identification

Le choix dépend de la preuve disponible. Servez-vous de ce tableau puis confirmez dans la boutique réelle.

Un flux de travail Shopify fiable

Commencez par nommer la preuve : paramètre du thème, CSS vivant, fichier chargé ou image. Notez ensuite le rôle et le modèle de page afin de ne pas confondre la fonte d’une bannière avec celle du corps.

Quand la décision est importante, confirmez-la de deux façons. Associez CSS calculé et requête réseau pour une boutique publique, ou paramètre du thème et rendu d’une page produit pour la vôtre. L’accord entre la source et le résultat est plus utile qu’une étiquette isolée.

Enfin, distinguez identification et remplacement. Si l’original est indisponible, comparez les candidats avec le même poids, la même taille, le même tracking et une longueur de ligne comparable. Documentez la pile CSS et la substitution.

• 1. Nommer la preuve: Paramètre, CSS calculé, fichier ou correspondance visuelle.
• 2. Mapper les rôles: Titres, corps, navigation, boutons, prix et cartes séparément.
• 3. Confirmer le rendu: Caractère distinctif et phrase réelle; recherchez les replis.
• 4. Vérifier la production: Langues, licence, performance, retours et graisses.
• 5. Documenter: Pile, sélecteur, rôle, date et choix de remplacement.

Erreurs et limites courantes

Le détecteur réduit la recherche, mais il ne remplace pas les contrôles de source et de production.

• Regarder seulement l’accueil: Les modèles produit et blog peuvent employer une autre famille.
• Croire le premier nom CSS: Un glyphe manquant ou un échec réseau déclenche une fonte de repli.
• Confondre logo et texte: PNG, tracé SVG et canvas ne révèlent pas la fonte originale.
• Oublier poids et espacement: 400, 700 et un tracking différent changent fortement l’apparence.
• Copier sans licence: Une URL publique ne donne pas le droit de réutiliser le fichier.
• Ignorer le mobile: Une police adaptée au bureau peut provoquer des coupures sur petit écran.