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.
Vous pouvez personnaliser les polices de votre thème Concept en utilisant l'une des deux méthodes ci-dessous :
Modifier le code liquide (fortement recommandé)
Voici un guide en 9 étapes pour y parvenir :
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.
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.
Après avoir suffisamment de fichiers, vous les téléchargez via [Tableau de bord administrateur] > [Contenu] 1 > [Fichiers] 2 > [Télécharger] 3 .
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.
Ensuite, revenez à votre tableau de bord d'administration, cliquez sur [Boutique en ligne] 1 > [Thèmes] 2 > choisissez Thème Concept > cliquez sur [Action] 3 > [Modifier le code] 4 .
Dans la fenêtre d'édition de code ouverte, vous accédez au dossier [Snippets] 1 dans la colonne de gauche. Dans ce dossier, cliquez sur le fichier [css-variables.liquid] 2 pour ajouter du code personnalisé pour la nouvelle police.
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 {
famille de polices : "MyFontHeading" ;
src: url(' ajoutez le lien de votre fichier de police ') format("woff2"),
url(' ajoutez le lien de votre fichier de police ') format("woff"); }
@font-face {
famille de polices : " MyFontBody" ;
src: url(' ajoutez le lien de votre fichier de police ') format("woff2"),
url(' ajoutez le lien de votre fichier de police ') 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.
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')
Après remplacement, cela ressemble à la photo ci-dessous :
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.
Utiliser l'application RoarTheme
Bien que Shopify propose une vaste collection de polices gratuites, vous aurez peut-être besoin d'une police personnalisée pour correspondre aux directives de votre marque. Si la police souhaitée n’est pas prise en charge nativement par Shopify, ne vous inquiétez pas ! Notre équipe a développé une application qui offre une large gamme d'options de personnalisation des polices pour améliorer la conception de votre site Web. Découvrez les possibilités et améliorez l'esthétique de votre magasin avec notre application .
Nous espérons que cet article vous sera utile ! Si vous avez des inquiétudes concernant cette fonctionnalité, n'hésitez pas à contacter notre équipe pour obtenir une assistance supplémentaire.