Rapido
- Créer un mot-clé très exactement libellé : polices
- Dans le Descriptif rapide du mot-clé, copier et coller le lien de téléchargement fourni par le service de polices Web de votre choix.
- Dans le Texte explicatif du mot-clé, inscrivez les règles de styles permettant d’appliquer les polices choisies.
Exemple en image
Dans cet exemple, après avoir choisi nos polices sur le site de Google Web Fonts, nous avons :
- copié le code fourni par Google et collé ce code dans le DESCRIPTIF de notre mot-clé,
- inscrit dans le TEXTE EXPLICATIF du mot-clé, les règles CSS appropriés pour appliquer au squelette Ahuntsic les polices désirées.
Le code
Descriptif rapide
- <link href='http://fonts.googleapis.com/css?family=Arvo:400,700,400italic,700italic|Yanone+Kaffeesatz:400' rel='stylesheet' type='text/css' />
Texte explicatif
- /* Police pour tout le site */
- body
- {
- font-family: 'Arvo', 'Tahoma', sans-serif !important;
- font-weight: 400;
- }
- /* Police pour le titre du site dans le bandeau d'entete */
- #entete a.nom-site,
- #entete a.nom-site:link,
- #entete a.nom-site:visited
- {
- font-family: 'Yanone Kaffeesatz', 'Tahoma', sans-serif !important;
- font-weight: normal;
- font-size : 3.5em;
- }
Techno
Descriptif rapide
Ici, nous indiquons le lien vers la feuille de styles CSS de déclaration des polices que nous désirons utiliser. Deux possibilités sont offertes :
- utiliser un service externe de téléchargement des polices,
- héberger vous-mêmes les polices à télécharger.
Le lien vers la feuille de style de téléchargement des polices que l’on désire utiliser, copié du service de son choix et collé dans le contenu de Descriptif rapide du mot-clé ’polices’ est inséré au tout début de la partie <head> de toutes nos pages, immédiatement après l’élément <title>.
Ainsi, on réduit un certain nombre d’effets indésirables sur nombre de navigateurs dont Internet Explorer.
Dans le jeu de squelettes AHUNTSIC, ce code se trouve au tout début du fichier /inc/inc-meta.html dans la boucle <BOUCLE_lien_webfonts... >
Petit détail : dans le cas de certains services externes, dont Google, il est recommandé d’ajouter au lien copié et collé, à la fermeture de la balise <link... >, une espace et une barre oblique afin d’assurer une validation adéquate du code en XHTML. En HTML 4 ou HTML5, cette correction du code copiée est inutile.
Texte explicatif
Ici, il faut maintenant spécifier par des déclarations CSS à quels éléments de nos page nous désirons appliquer les polices choisies.
Ce code sera inséré à la toute fin de la partie <head>, dans le fichier styles.html. Ainsi, on s’assure que nos déclarations CSS surchargerons toutes les autres déclarations CSS du squelette AHUNTIC ou des plugins activés.
