Les thèmes ont un large choix de polices et typographies différentes mais parfois, il peut arriver de vouloir quelque chose de plus spécifique. Dans ce tutoriel vous apprendrez à ajouter une ou plusieurs polices d’écriture sur votre thème Shopify.

Pourquoi utiliser une police shopify Google fonts ?

Tout simplement car elle sera compatible sur tous supports et navigateurs anciens et récents. A contrario si vous souhaitez installer une police de votre choix, elle pourrait bien ne pas s’afficher correctement car il faut des typographies compatibles pour le Web.

Choisir une police et l’installer sur votre thème

Lien vers le choix d’une police

Vous allez donc essayer de trouver la police de vos rêves et l’ajouter à votre boutique. Cliquez ensuite sur le petit « + »  de celle qui vous intéresse. Elle sera ajoutée à votre sélection.

A ce stade une fenêtre va apparaître en bas à droite. Il ne vous reste plus qu’à Cliquer dessus et de copier le code standard de la zone « Embed Font » qui va ressembler à ceci: « <link href= »https://fonts.googleapis.com/css?family=Roboto&display=swap » rel= »stylesheet »> ».

 

Rendez-vous dans « Boutique en ligne – Actions – Modifier le Code » – Trouvez le dossier « Mise en page (Layout) ». Dans ce dossier vous allez devoir trouver votre fichier « theme.liquid ». Ouvrez ce fichier et trouvez la balise suivante: « <head> ». Collez juste en dessous  le code mémorisé.

Revenez sur le site Google Fonts dans la fenêtre « Family selected » et cette fois ci copiez le code de la section « Specify in CSS ». un truc du genre: « font-family: ‘Roboto’, sans-serif; ».

L’appel de la police est donc dans le theme.liquid et vous allez devoir choisir sur quelles balises CSS ou éléments appliquer cette police.

Choix des balises à prendre en compte

Rendez-vous dans « Boutique en ligne – Actions – Modifier le Code » – Trouvez le dossier « Ressources (Assets) ». Dans ce dossier vous allez devoir trouver votre fichier base.css, theme.css, style.css ou autre fichier .css que votre thème utilise Tout en bas collez le code d’exemple ci-dessous.

Pour l’appliquer sur tout le site

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

Attention aux surcharges ! En effet les titres seront certainement surchargé pour reprendre la main sur la typo générique.

L’appliquer sur les titres

Si vous souhaitez mettre la police sur vos titres, il vous faudra reprendre la main comme ceci:

Thèmes standard

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 { font-family: 'Roboto', sans-serif; }

Si vous avez Speedfly

.main-content h1, .main-content .h1, .main-content #shopify-product-reviews .spr-header-title, #shopify-product-reviews .main-content .spr-header-title, .main-content h2, .main-content .h2, .main-content h3, .main-content .h3, .main-content h4, .main-content .h4, .main-content h5, .main-content .h5 { font-family: 'Roboto', sans-serif; }

Si après toutes ces modifications la typographie n’est pas prise en compte c’est que votre thème reprend la main sur ces codes. Dans ce cas de figure il faudra s’y connaitre un tant soit peu en code et vous renseigner sur l’héritage CSS pour parvenir à vos fins…

Bon tuto à tous !

Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 11 votes]

Besoin d'aide ?

Vous avez un problème pour faire fonctionner ce tutoriel ou vous avez un besoin spécifique ?
Nous pouvons le faire pour vous ! pour ce faire merci de prendre contact avec notre équipe.

En savoir plus

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Besoin de déléguer votre SAV ?

Si vous avez besoin d'une personne pour gérer votre SAV j'ai la perle rare 😉 contactez moi en MP ou cliquez sur le bouton ci-dessous:

Je veux déléguer mon SAV

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Cet article a 15 commentaires

  1. Top merci comme d’habitude !

  2. Top merci comme d’habitude ! d’une super aide

  3. Bonjour,
    Je n’ai trouvé la solution sur aucun tuto.
    Sur le thème debut, il n’y a aucun « theme.scss.liquid, style.scss.liquid, timber.scss.liquid »
    Où coller le texte ?
    Si il n’y a pas d’alternative, cela est il propre au thème debut ?

    1. Hello, un theme.css ou theme.scss fait l’affaire 😉

  4. Bonjour,
    Merci pour votre vidéo.
    Je voulais savoir comment je devais procéder avec une type acheté (sur créative market)
    Ici c’est sur une typo venant d’une base de donnée google, mais je ne sais trop comment procéder avec celle que j’ai acheté.
    J’ai par exemple un fichier WOFF et je ne sais qu’en faire. Merci beaucoup.

    1. Hello, je déconseille fortement car ca risque d’alourdir bcp votre site et il est tjs préférable de mettre une typo native navigateur pour une compatibilité entre utilisateurs. Ceci étant dit c’est possible mais cela demande l’expertise d’un développeur car ce n’est pas évident à faire :). Bonne journée.

  5. Bonjour et merci pour cette vidéo. En revanche, dans le thème « Context », je ne trouve pas le fichier scss dans la partie assets. Savez-vous où je dois me rendre? Il n’est pas ailleurs non plus. Merci pour votre aide!

    1. Bonjour, navré je ne connais pas ce thème mais généralement il faut trouver un fichier .css désormais (theme, app, style, golbal, base etc…)

  6. Bonjour,
    Ma police ne s’affiche pas pareil d’un ordi à un autre Comment puis-je faire ?

    1. Bonjour, malheureusement on ne peut rien faire cela dépend de la prise en charge des navigateurs 🙁 il faut en trouver une plus compatible 🙂

  7. bonjour je n’arrive pas, cela ne s’affiche pas

    1. Hello, hum étrange le thème doit l’empêcher – faudrait voir avec leur support le pourquoi 🙂

  8. Bonjour,
    J’ai réussi à appliquer cela sur mes H2 et j’aimerais également l’appliquer sur le menu principal, est-ce possible? Merci

    1. Bonjour, oui je le propose sur le tutoriel mais si le thème reprend la main alors il faudra demander au support du thème pour adapter le code 🙂

Laisser un commentaire

Fermer le menu

OFFRE SPÉCIALE -50% SUR LA FORMATION ECOMFLY

1 Bootcamp en vidéo sur le ECOM + 1 Formation Création de Boutique Brandée + 1 Formation SEO sur Shopify