google web fonts - Manuel d`Utilisation Powerboutique

GOOGLE WEB FONTS
Ajouter une police
AJOUTER UNE POLICE
Page 1 / 1
TUTO / GOOGLE WEB FONTS
GOOGLE WEB FONTS
Ajouter une police
Google web fonts vous donne la possibilité d’intégrer toutes les polices de caractères
disponibles via l'API de Google Font. Celles-ci sont disponibles pour une utilisation sur
votre site Web conformément à une licence « open source » et sont servies par des
serveurs Google.
Les polices proposées sont utilisables sur n’importe quel ordinateur. Elles sont
compatibles avec tous les navigateurs et indexables par les moteurs de recherche.
Nous vous conseillons d’utiliser ces polices pour des titres et non pour un texte complet.
Allez sur http://www.google.com/webfonts
Voici les différentes étapes à l’intégration d’une police de Google Font Directory :
Etape 1 :
Cliquez sur le bouton :
Choisissez une police dans la liste proposée ou saisissez son nom dans la zone de
recherche.
Prenons l’exemple de la police « Permanent Marker » :
Etape 2 :
Cliquez sur « Quick-use » :
Page 2 / 2
TUTO / GOOGLE WEB FONTS
GOOGLE WEB FONTS
Ajouter une police
Etape 3 :
Copiez le code de la partie 3.
Dans votre logiciel PowerBoutique :
Dans Paramétrages > Modèles, couleurs et textes, cliquez sur le bouton Personnaliser.
Accédez en bas de page à l’espace promotionnel 7.
Vous devez choisir un espace se trouvant sur toutes les pages de votre site.
Cliquez sur le crayon de modification de cet espace.
Dans l’onglet HTML, collez le code que vous avez copié précédemment dans Google
Webfonts.
Cliquez sur le bouton « Enregistrer ».
Etape 4 :
Dans Google Webfonts, le CSS pour la police Permanent Marker est le suivant :
La méthode d’intégration du code CSS dépend de l’emplacement souhaité de la police.
Cas n°1 : vous souhaitez utiliser cette police dans un espace promotionnel ou une page
Gestion du contenu > Espaces promotionnels ou Gestion du contenu > Editeur de pages.
Insérez le code dans l’onglet HTML :
<div style="font-family: ‘Permanent Marker’, cursive;">VOTRE TEXTE OU TITRE</div>
Page 3 / 3
TUTO / GOOGLE WEB FONTS
GOOGLE WEB FONTS
Ajouter une police
Cliquez sur Enregistrer.
Vous pouvez également modifier la taille de la police avec l’éditeur de mise en forme.
Résultat :
Cas n°2 : vous souhaitez utiliser cette police dans un menu de navigation
- Paramétrage > Modèles, couleurs et textes > Personnaliser
- Cliquez sur le crayon de modification du menu
- Onglet « apparence », « lien premier niveau »
Insérez le code dans les propriétés avancées css :
font-family: ‘Permanent Marker’, cursive;
Le texte en rouge doit être personnalisé par le code inscrit après « font-family : » avec le
nom de la police de caractères de votre choix.
Page 4 / 4
TUTO / GOOGLE WEB FONTS
GOOGLE WEB FONTS
Ajouter une police
Cliquez sur Enregistrer.
Résultat :
Page 5 / 5
TUTO / GOOGLE WEB FONTS