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

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 2 votes]

🤗 Vous souhaitez m'encourager à continuer mes Tutos ?

Cliquez sur le bouton ci-dessous pour me laisser un petit pourboire 😉

Payer un coup à Dgeo Dev

Laisser un commentaire

Fermer le menu

formation seo gratuite shopify

Une formation Gratuite SEO sur Shopify ça te tente ?

Alors abonne-toi à la chaine et active la cloche pour ne pas louper l'arrivée des prochains modules !

Commencer la formation