1. Utiliser les polices de Shopify.
2. Utiliser une app pour avoir les polices de Google Fonts.
3. Ajouter une police dans le thème avec du code.

• Simplicité et rapidité : Cette méthode est la plus simple et la plus rapide à mettre en œuvre. Elle ne requiert aucune connaissance technique et peut être réalisée directement depuis l'interface d'administration de Shopify.
• Compatibilité : Les polices proposées par Shopify sont optimisées pour une compatibilité maximale avec différents navigateurs et appareils, garantissant ainsi une expérience utilisateur homogène.
• Coût : Utiliser les polices intégrées ne génère aucun coût supplémentaire pour votre boutique.

• Variété : Google Fonts offre une large sélection de polices, vous permettant de trouver facilement celle qui correspondra parfaitement à l'identité de votre marque.
• Facilité d'intégration : Avec l'aide d'une application, l'intégration de Google Fonts devient accessible, même pour ceux qui n'ont pas de compétences techniques avancées.
• Gratuité : Google Fonts est un service gratuit, ce qui permet d'enrichir le design de votre site sans surcoût.

• Personnalisation complète : Cette méthode offre une liberté totale en matière de personnalisation. Vous pouvez utiliser n'importe quelle police, y compris des polices payantes ou personnalisées, pour créer un design unique.
• Contrôle total : En ajoutant des polices via du code, vous avez un contrôle total sur la manière dont elles sont intégrées et utilisées sur votre site, vous permettant d'optimiser la performance et l'esthétique.

1. Utiliser une police de Shopify

La bibliothèque de polices de Shopify est une collection de polices qui comprend des polices système, une sélection de polices Google, et des polices sous licence de Monotype. Ces polices peuvent être utilisées gratuitement sur toutes les boutiques en ligne Shopify. Cette sélection de polices couvre un large éventail de cas d'utilisation. Toutefois, en raison de restrictions de licence, certaines polices ne peuvent pas être incluses par Shopify.

Pour choisir la police, rendez-vous sur Boutique en ligne > Thèmes puis Personnaliser.

Ensuite, allez sur Paramètre de thème et enfin Typographie.

2. Utiliser les Google Fonts avec une app (sans coder)

Comment les intégrer dans votre thème Shopify ?

Étape 1, téléchargez RT: Google Fonts, Custom Fonts

Ensuite, cliquez sur Customize app

et allez l'installer dans votre thème en suivant le bouton.

Retournez sur l'app et cliquez sur Add new et choisissez Google Font.

Nommez votre police pour que vous puissiez vous y retrouver et cliquez sur "change" pour sélectionner la police.

Faites une recherche, sélectionnez votre police et sa graisse, puis cliquez sur Select.

Vous retournerez au panneau précédent où vous pourrez choisir sur quels éléments vous souhaitez appliquer cette police.

Ici j'ai décidé d'appliquer ma police sur tous les entêtes :

Une fois satisfait, retournez au panneau précédent en cliquant sur la flèche, choisissez d'ajouter une autre police en cliquant sur Add new ou validez ce qui a été fait en cliquant sur Enable.

Passez à travers les étapes dans la fenêtre qui apparait et allez vérifier que tout est OK sur la boutique en cliquant sur Open Your Store.

Si pour une raison ou une autre cela ne marche pas, retournez sur la Police nouvellement créée et cliquez sur Force Styles Override (tout en bas).

Et voici notre site avec une nouvelle police !

3. Ajouter une police dans le thème avec du code

Si vous disposez de vos propres fichiers de police, et que vous êtes à l'aise pour modifier le code du thème, suivez ces étapes pour inclure la police dans votre thème :

Ajoutez les fichiers de police au répertoire assets. Créez une règle CSS @font-face afin de pouvoir référencer la police. Utilisez le filtre asset_url pour générer l'URL du fichier de police.

@font-face {
  	font-family: "Nom de la police";
  	src: url("{{ '[nom-du-fichier-de-police]' | asset_url }}") format("[format-de-police]");
}

body {
    font-family: 'NomDeLaPolice', sans-serif;
}

Cherchez le sélecteur :root dans theme.liquid et collez le @font-face au-dessus et changez les valeurs de variables en dessous comme sur l'exemple ici :

Conclusion