Dans ce tutoriel, je vais vous montrer comment télécharger n’importe quelle police Web Google sur votre blog Blogger. Il y a plusieurs façons de le faire, mais voici comment je le fais.
Ce tutoriel est le mieux adapté pour ceux qui ont des connaissances CSS. Pour ce tutoriel, j’utilise le modèle « Simple » de Blogger.
Voici un exemple de police web Google personnalisée installée sur notre modèle de Macaron au citron.
Étape 1
Avant de commencer, je recommande toujours de sauvegarder votre modèle actuel avant d’apporter des modifications (juste au cas où quelque chose se passe mal).
Vous pouvez le faire dans votre tableau de bord en allant dans Template > Backup/Restore (situé dans le coin supérieur droit) > Télécharger le modèle complet.
Étape 2
Après avoir sauvegardé votre modèle, cliquez sur Modifier le code HTML (nous sommes toujours dans l’onglet « Modèle »).
Étape 3
En laissant cette page ouverte, ouvrez un nouvel onglet ou une nouvelle fenêtre et rendez-vous sur le site Web Google Web Fonts. Recherchez la police que vous souhaitez utiliser et sélectionnez Utilisation rapide.
J’ai choisi d’utiliser la police ‘Lobster Two’.
Étape 4
Pour la section 1: Choisissez les styles que vous voulez, choisissez les styles que vous voulez disponibles pour votre police (vous pouvez sélectionner plusieurs styles). Gardez à l’esprit que la sélection de trop de styles peut ralentir votre blog. J’ai sélectionné Normal 400 comme vous pouvez le voir ci-dessous.
Pour la section 3: Ajoutez ce code à votre site Web, cliquez sur l’onglet @import.
Étape 5
Copiez les informations dans la zone @import.
Maintenant, en laissant cette page ouverte, retournez à votre blog (où vous avez sélectionné Modifier HTML). Nous allons coller le code d’importation de polices dans votre modèle.
Recherchez le texte suivant situé vers le début de l’éditeur de modèle (généralement situé sur les lignes 13 ou 14):
<b:skin>...</b:skin>
Une fois développé, collez les informations que vous avez copiées à partir de la zone @import sur le site Web Google Web Fonts, le texte suivant:
/* Variable definitions
Cela devrait ressembler à ceci:
Cliquez sur Enregistrer le modèle. Votre police a maintenant été importée ! Vous pouvez maintenant placer la famille de polices à l’endroit où vous souhaitez qu’elle s’affiche dans votre modèle.
Étape 6
Rapidement, je vais vous montrer comment utiliser votre police nouvellement importée. Dans cet exemple, j’utiliserai la police pour le titre de mon article. Dans l’éditeur HTML, recherchez:
h3.post-title, .comments h4
Supprimez la ligne suivante:
font: $(post.title.font);
et remplacez-le par le texte répertorié à la section 4: Intégrez les polices dans votre CSS sur le site Web Google Web Fonts.
font-family: 'Lobster Two', cursive;
Cela devrait ressembler à ceci une fois que vous avez collé les informations de la famille de polices:
