Utiliser des polices personnalisées

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 WebClick to copy

1.1 – Télécharger la policeClick to copy

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 WebClick to copy

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 à jourClick to copy

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 PageFlyClick to copy

2.1 – Ouvrez le fichier CSS de police et remplacez-le par les URL de police ShopifyClick to copy

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éClick to copy

custom fonts

Copiez le morceau de code que vous avez obtenu du fichier «stylesheet.css»

custom fonts pagefly

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 pageClick to copy

(Intégrer ceci https://codepen.io/anon/pen/YJjJPg)

pagefly custom fonts

2.4 – Appliquer la police personnalisée à un élément spécifiqueClick to copy

Sélectionnez l’élément.

Dans Général> Attribut, mettez un nom dans Classe. Par exemple: custom-font

use custom fonts of pagefly

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.

Feedback
Thank you for your feedback!

Could not find the answer
to your question?

Chat with us
Boost your holiday sales with PageFly's Thanksgiving Template 👉 Discover Now