Comment charger les polices locales dans le thème

Il existe deux approches pour l'ajout de polices locales dans un thème. La première ajoute votre nouvelle police (s) locale au Sélecteur de polices qui vous permet de définir la police d’une zone spécifique ou l’aspect de votre site dans l'administrateur de gantry.

La deuxième méthode définit la police active du thème, globalement. Cette méthode vous permet d'utiliser la nouvelle police locale dans le thème, mais pas dans le Sélecteur de polices. Vous pouvez combiner les deux pour avoir votre police disponible à la fois, en modifiant le fichier theme.yaml et en apportant des modifications à votre fichier custom.scss.

Dans ce guide nous allons utiliser Roboto en tant que notre nouvelle police locale. Vous pouvez la récupérer sur FontSquirrel. Il vous suffit de sélectionner l'onglet WebFont Kit et de télécharger roboto-fontfacekit.zip.

Ajout d’une nouvelle police au sélecteur de polices

Si vous souhaitez rendre votre nouvelle police accessible par le Sélecteur de polices, vous aurez besoin de faire une modification dans le fichier theme.yaml afin d'ajouter la police et définir les associations de graisses de police.

Le fichier theme.yaml est essentiel pour que votre thème fonctionne Si vous effectuez une modification à ce fichier, sachez que celle-ci sera probablement effacée dans le cadre d’une mise à jour du thème. Ceci est vraiment seulement recommandé pour les développeurs qui créent leur propre thème Gantry ou pour les utilisateurs avancés.

Voici les étapes que vous devrez suivre pour y arriver :

files

Ajouter les fichiers de polices locales dans TEMPLATE_DIR/custom/fonts/.

Une fois cela fait, vous pouvez ajouter votre nouvelle police au YAML dans la section fonts. En utilisant le template de RocketTheme Callisto , par exemple, voici ce à quoi le fichier theme.yaml ressemble par défaut.

 

fonts:
    sourcesanspro:
      700: 'gantry-theme://fonts/sourcesanspro/sourcesanspro_bold/sourcesanspro-bold-webfont'
      700italic: 'gantry-theme://fonts/sourcesanspro/sourcesanspro_bolditalic/sourcesanspro-bolditalic-webfont'
      400italic: 'gantry-theme://fonts/sourcesanspro/sourcesanspro_italic/sourcesanspro-italic-webfont'
      400: 'gantry-theme://fonts/sourcesanspro/sourcesanspro_regular/sourcesanspro-regular-webfont'
    lato:
      900: 'gantry-theme://fonts/lato/lato_black/lato-black-webfont'
      700: 'gantry-theme://fonts/lato/lato_bold/lato-bold-webfont' 

 

 

Pour ajouter la police Roboto, la section des polices du fichier YAML ressemblera à ceci.

 

fonts:
  sourcesanspro:
    700: 'gantry-theme://fonts/sourcesanspro/sourcesanspro_bold/sourcesanspro-bold-webfont'
    700italic: 'gantry-theme://fonts/sourcesanspro/sourcesanspro_bolditalic/sourcesanspro-bolditalic-webfont'
    400italic: 'gantry-theme://fonts/sourcesanspro/sourcesanspro_italic/sourcesanspro-italic-webfont'
    400: 'gantry-theme://fonts/sourcesanspro/sourcesanspro_regular/sourcesanspro-regular-webfont'
  lato:
    900: 'gantry-theme://fonts/lato/lato_black/lato-black-webfont'
    700: 'gantry-theme://fonts/lato/lato_bold/lato-bold-webfont'  
  roboto:
    400: 'gantry-theme://fonts/roboto/roboto_regular_macroman/Roboto-Regular-webfont'
    400italic: 'gantry-theme://fonts/roboto/roboto_italic_macroman/Roboto-Italic-webfont'
    400: 'gantry-theme://fonts/roboto/roboto_condensed_macroman/RobotoCondensed-Regular-webfont'
    400italic: 'gantry-theme://fonts/roboto/roboto_condenseditalic_macroman/roboto_condenseditalic_macroman'
    700: 'gantry-theme://fonts/roboto/roboto_bold_macroman/Roboto-Bold-webfont'
    700italic: 'gantry-theme://fonts/roboto/roboto_bolditalic_macroman/Roboto-BoldItalic-webfont'
    900: 'gantry-theme://fonts/roboto/roboto_black_macroman/Roboto-Black-webfont'
    900italic: 'gantry-theme://fonts/roboto/roboto_blackitalic_macroman/Roboto-BlackItalic-webfont'

 

 

Les numéros indiqués ici sont les graisses de la police. En général, 400 est une graisse normale, 700 est en gras, etc.

Copiez le fichier TEMPLATE_DIR/gantry/theme.yaml et copiez le dans un endroit sûr si vous ne l'avez pas déjà fait.Comme vous allez modifier ce fichier directement, et non pas par une surcharge personnalisée, vous perdrez probablement ces modifications lors d’une mise à jour.

Ajout d’une nouvelle police à votre thème

Si vous voulez que les polices locales soit chargées sur votre site, vous pouvez le faire en suivant ces étapes simples :

files

  • Ajoutez les fichiers de la police locale à TEMPLATE_DIR/custom/fonts/.

  • Ajoutez votre police dans votre fichier custom.scss. Si vous ne l’avez pas déjà créé, vous devrez le faire en l’ajoutant à TEMPLATE_DIR/custom/scss.

 

@import "vendor/bourbon/bourbon";
@import "nucleus/theme/mixins/typography";
@include import-font('roboto’);

 

 

Graisses de police (Font Weights)

fonts

Voici un guide de référence rapide pour les numéros de graisses de polices dans le fichier theme.yaml, ainsi que mentionné dans le Sélecteur de polices.

Weight

Description

Italic Variant

100 Thin 100italic
200 Extra Light 200italic
300 Light 300italic
400 Regular 400italic
500 Medium 500italic
600 Semi-Bold 600italic
700 Bold 700italic
800 Extra Bold 800italic
900 Ultra Bold 900italic

Installation d'une police personnalisée : exemple

Dans cet exemple, nous allons vous expliquer comment vous pouvez ajouter la police gratuite personnalisée Bloody dans votre template Gantry.

example 1

Étape 1 : Ajouter vos fichiers de polices personnalisées

download

Bloody est une police gratuite que vous pouvez télécharger à FontSquirrel. Veuillez vous assurer que vous téléchargez le @font-face Kit.

Décompressez le package et déplacer les fichiers suivants dans TEMPLATE_DIR/custom/fonts/:

  • BLOODY-webfont.eot

  • BLOODY-webfont.svg

  • BLOODY-webfont.ttf

  • BLOODY-webfont.woff

    custom files

Étape 2: Ajout du CSS nécessaire

Créez votre fichier de feuille de style personnalisée, custom.scss, et l'ajouter à TEMPLATE_DIR/custom/scss/.

Ajoutez ce qui suit dans le fichier SCSS personnalisé:

 

/* Adding Font BLOODY */

@import "vendor/bourbon/bourbon";
@include font-face('BloodyNormal', 'gantry-theme://fonts/BLOODY-webfont');

.font-family-bloody {
  font-family: 'BloodyNormal',Helvetica,Arial,sans-serif;
  font-weight: normal;
  font-style: normal;
}

 

 

Utilisation de la police

example 2

Une fois que vous avez ajouté la police dans le répertoire de contenu personnalisé de votre thème, vous pouvez l'appliquer à votre site. Par exemple, si vous vouliez que le titre d'une particule apparaisse dans la police de caractères Bloody, vous devez le référencer dans le fichier Twig de la particule.

 

{% if particle.headline %}<h1 class="font-family-bloody">{{ particle.headline|raw }}</h1>{% endif %}

 

 

Comme vous pouvez le voir, nous avons réglé le style h1 à font-family: BloodyNormal;. Comme cette famille de polices est définie dans le fichier custom.scss, il devrait finir par trouver Bloody et le présenter en frontend.

Il y a encore une étape qui reste à faire. Vous devez Recompiler le CSS dans le panneau d'administration Styles dans l'administrateur Gantry. Faire cela va forcer Gantry recompiler le CSS, y compris les modifications apportées dans le fichier custom.scss. Une fois que vous avez fait cela, vous devriez être en mesure de recharger la page et de voir vos modifications.

example 2

Vous pouvez également y faire référence dans les balises Span dans les champs de texte de l'administrateur Gantry. Par exemple, <span style="font-family: BloodyNormal;">Key Features</span> fonctionnera également dans les cas où vous voudriez changer la police pour une seule instance de particule.

particle