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 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é

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 page

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

pagefly custom fonts

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

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.

Was this helpful?

Try out all PageFly features with Free plan

.myshopify.com
Don’t have Shopify store yet? Create store
×

PageFly Help Center is now available in French, Portuguese and Chinese.Please check the flags on the page header.

I got it!
Languages