Avant de passer à des étapes spécifiques, vous pouvez regarder cette vidéo de didacticiel
Dans cet article, vous apprendrez à ajouter des polices personnalisées et à les appliquer à votre page PageFly.
Étape 1: téléchargez et convertissez la police au format de police Web
1.1 – Télécharger la police
Dans notre exemple, nous téléchargeons une police depuis www.dafont.com. C’est parti.
Après avoir téléchargé la police, vous devriez voir les fichiers suivants dans un dossier zippé. Vous devrez convertir deux fichiers avec l’extension “otf” et “ttf”.
1.2 – Convertir la police au format de police Web
Vous devez visiter https://transfonter.org/ pour convertir la police ci-dessus.
Cliquez sur Ajouter des polices pour télécharger les 2 fichiers ci-dessus. Cochez les cases “WOFF” et “WOFF2” dans la section Formats.
Cliquez sur Convertir pour voir le lien “télécharger” et télécharger.
Sur votre ordinateur, il devrait y avoir 2 fichiers avec l’extension “woff” et “woff2“.
1.3 – Téléchargez la police dans votre boutique Shopify et mettez-la à jour
Dans votre tableau de bord Shopify, accédez à Paramètres> Fichiers
Téléchargez ensuite 2 fichiers de polices: woff et woff2 dans votre boutique.
Dans la colonne URL, veuillez copier les URL de ces polices sur votre bloc-notes ou ailleurs. Nous les utiliserons à l‘étape 2.2 lorsque nous appliquerons ces polices à notre page PageFly. Dans notre exemple, les URL des polices sont:
https://pastebin.com/raw/SepA71rg
Étape 2: appliquer la police à la page PageFly
2.1 – Ouvrez le fichier CSS de police et remplacez-le par les URL de police Shopify
Sur votre ordinateur, recherchez le dossier de polices que vous avez téléchargé dans la partie précédente et recherchez le fichier “stylesheet.css” puis ouvrez-le. Vous pouvez ouvrir ce fichier avec Brackets.io ou une application alternative.
Après avoir ouvert le fichier, vous verrez le code ci-dessous.
(intégrez ceci https://pastebin.com/raw/CT9HsQHa)
Vous devez remplacer l’URL des fichiers woff2 et woff par l’URL Shopify que vous avez obtenue à l’étape 1.3. Donc dans notre cas, ce sera le code ci-dessous. Vous devrez copier ce morceau de code dans le Ajouter un code personnalisé de votre page. Faisons le.
(intégrez ceci https://pastebin.com/raw/r6vbFYGE)
2.2 – Ouvrez votre page PageFly et cliquez sur le bouton Ajouter un code personnalisé
Copiez le morceau de code que vous avez obtenu du fichier «stylesheet.css»
Vous devez maintenant décider si vous souhaitez appliquer la police personnalisée à la page entière ou à l’élément spécifique.
2.3 – Appliquer la police personnalisée à toute la page
(Intégrer ceci https://codepen.io/anon/pen/YJjJPg)
2.4 – Appliquer la police personnalisée à un élément spécifique
Sélectionnez l’élément.
Dans Général> Attribut, mettez un nom dans Classe. Par exemple: custom-font
Ensuite, intégrez ceci https://pastebin.com/raw/hNn8xU1k
(remplacez *:not (.fa) à l’étape 2.3 par .custom-font)
Veuillez noter que vous ne devez pas choisir de police dans Style> Typographie> Police pour que ce code fonctionne.
