Ajoutez des polices personnalisées à votre thème Shopify

Shopify propose des centaines de polices gratuites à utiliser pour votre boutique. Cependant, vous devez utiliser une police personnalisée pour vous aligner sur les lignes directrices de votre marque, mais elle n'est pas prise en charge par Shopify, vous pouvez toujours l'ajouter à votre thème. Voici un guide sur la façon de procéder :

1. Vous devez d’abord disposer de votre police. Certaines polices ont des licences, alors assurez-vous de les acheter correctement pour votre utilisation. Notre équipe d'assistance ne sera pas chargée d'obtenir les polices dont vous avez besoin.

2. Ensuite, préparez deux fichiers au format .woff et .woff2 pour chaque style de police à ajouter. Ceci permet de garantir que la police ajoutée est lisible sur tous les types de navigateurs.

   

3. Après avoir suffisamment de fichiers, vous les téléchargez dans le dossier Fichier dans les paramètres du thème .

   

   Tous vos fichiers de polices téléchargés comportent un bouton de chaîne sur le côté droit pour fournir le lien de fichier pour votre acte de copie.

   

4. Ensuite, revenez à votre tableau de bord d'administration, cliquez sur Boutique en ligne > Thèmes et choisissez le thème Be Yours pour le modifier davantage. Cliquez sur Actions > Modifier le code .

   

5. Dans la fenêtre ouverte de modification du code, accédez au dossier Snippets dans la colonne de gauche. Dans ce dossier, cliquez sur le fichier « css-variables.liquid » pour ajouter du code personnalisé pour la nouvelle police.

   

6. Dans le fichier ouvert « css-variables.liquid », vous ajoutez des codes supplémentaires sous le style d'onglet. Il se trouve sous le texte {%- style -%} . Les codes sont ajoutés comme suit :

   @font-face {
   famille de polices : " MyFontHeading " ;
   src: url(' ajoutez le lien de votre fichier de police ') format("woff2"),
   url(' ajoutez le lien de votre fichier de police ') format("woff"); }

   @font-face {
   famille de polices : " MyFontBody " ;
   src: url(' ajoutez le lien de votre fichier de police ') format("woff2"),
   url(' ajoutez le lien de votre fichier de police ') format("woff"); }

   Remarque : les sections de texte en italique sont personnalisées par vos soins. Le nombre de codes @font-face{ } à ajouter dépend du nombre de styles de police dont vous disposez.

   

7. Après cela, recherchez le texte « font-body-family » pour accéder à la ligne de code appropriée et remplacez toutes les parties de {{...}} par votre texte ajouté pour font-family dans les codes de l'étape 6 (dans notre exemple, il s'agit de 'MyFontHeading'). De même, recherchez le texte « font-heading-family » et remplacez toutes les parties de {{...}} par votre texte ajouté pour la ligne font-family (« MyFontBody » dans notre exemple).

   

8. Après remplacement, cela ressemble à la photo ci-dessous :

   

9. Enfin, cliquez sur Enregistrer .

Note :

• Les paramètres dans Paramètres du thème > Typographie ne sont plus en vigueur peu importe ce que vous configurez ici une fois que vous avez ajouté ces codes dans le fichier « css-variables.liquid ».
• Toutes les instructions ci-dessus sont applicables lorsque vous appliquez la même police personnalisée pour toutes les sections et tous les blocs. Si vous devez appliquer différentes polices pour différentes sections ou blocs, le processus d'édition sera beaucoup plus compliqué et veuillez contacter notre équipe d'assistance pour obtenir de l'aide supplémentaire.

Nous espérons que cet article vous sera utile ! Si vous avez des inquiétudes concernant cette fonctionnalité, n'hésitez pas à contacter notre équipe pour obtenir une assistance supplémentaire.