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 ... > Modifier le code .

   

5. Dans la fenêtre ouverte de modification du code, vous 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 {
    font-family: "MyFontHeading";
    src: url(' add your font file link ') format("woff2"),
    url(' add your font file link ') format("woff");
    }
   
    @font-face {
    font-family: "MyFontBody";
    src: url(' add your font file link ') format("woff2"),
    url(' add your font file link ') format("woff");
    }

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

   

7. Après cela, vous :

   • 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).

   • 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 'MonEn-Tête de Police')

8. Après remplacement, le code commenté dans la case rouge est remplacé par le code dans la case verte. 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.

Besoin d'une aide supplémentaire

Si vous rencontrez des problèmes ou avez besoin d'aide supplémentaire avec votre thème BeYours, veuillez contacter nos services d'assistance via notre système de tickets pour obtenir de l'aide dans les 8 heures.

Scannez le code QR ci-dessous pour rejoindre notre communauté WhatsApp pour les mises à jour, les actualités et les annonces.