A. Introduction
Ce tutoriel est disponible pour les packs suivants :
Classique
Premium
Master +
La typographie est un élément essentiel de votre boutique et de votre image de marque. Le choix de celle-ci est primordial, et nous vous conseillons au maximum 2 par boutique : une pour vos titres, une autre pour le corps de texte.
Ajouter une typographie externe à Shopify peut dégrader les performances de votre site car cela alourdira les requêtes faites pour obtenir celle-ci.
B. Mise en place
Dans un premier temps, procurez vous votre typographie au format .woff2 (Ex: matypographie.woff2) qui est un format web récent et compatible avec énormément de navigateurs.
Rendez-vous ensuite dans votre boutique : Paramètres > Fichiers puis cliquez sur Importer les fichiers et sélectionnez votre typographie.
Une fois importée, copiez l’url de celle-ci en cliquant sur l’icône de droite :
Allez ensuite dans Boutique en ligne > Thèmes puis cliquez sur Personnaliser sur votre Phantom Thème.
Dans l’éditeur de personnalisation, rendez-vous dans Paramètres de thème > Extensions puis dans le champ Avant la balise </head> > Css placez ce qui suit :
@font-face {
font-family: 'NomTypographie';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('URL_Typographie') format('woff2');
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
font-family: 'NomTypographie' !important
}
Vous remplacerez NomTypographie par le nom que vous souhaitez (uniquement A-Z / a-z), puis URL_Typographie par l’url précedemment copiée.
Vous pouvez définir l’attribut font-style sur : normal, bold (en gras) ou italic (en italique)
Ici la typographie est placée sur les Hn de votre boutique. Si vous souhaitez, vous pouvez modifier les éléments sur lesquels celle-ci s’applique en modifiant le sélecteur CSS