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 « 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 « Assets ». Dans ce dossier vous allez devoir trouver votre fichier « xxx.scss.liquid ». Généralement un « theme.scss.liquid, style.scss.liquid, timber.scss.liquid » Tout en bas collez le code d’exemple ci-dessous.
Pour l’appliquer sur tout le site
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
Si vous avez Speedfly
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 !
Penia
30 Déc 2020Top merci comme d’habitude !
Penia
30 Déc 2020Top merci comme d’habitude ! d’une super aide
Dgeo Dev
30 Déc 2020Merci 🙂
DEGUT
9 Mar 2021Bonjour,
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 ?
Dgeo Dev
9 Mar 2021Hello, un theme.css ou theme.scss fait l’affaire 😉
inès
20 Oct 2021Bonjour,
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.
Dgeo Dev
22 Oct 2021Hello, 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.