Site de démonstration du jeu de squelettes ESCAL fonctionnant sous SPIP3 et mis à la disposition des Etablissements SColaires de l’Académie de Lyon.

Utilisé à ce jour dans 1327 sites
Utiliser une autre police de caractères
Article mis en ligne le 24 novembre 2016
dernière modification le 28 décembre 2016

par Jean Christophe Villeneuve
logo imprimer
Enregistrer au format PDF

Par défaut, Escal utilise la famille de police suivante : Verdana, Arial, Helvetica car ce sont des polices qui sont présentes sur tous les ordinateurs, elles sont devenues des standards.

Mais on pourrait avoir envie d’en utiliser une autre, par exemple une police plus espacée pour le titre des rubriques et des articles dans les pages correspondantes. Si on connaît un peu le langage CSS, on se dit : "Facile ! Y’a qu’à coller ça dans le perso.css et hop !"

C’est pas idiot sauf que le problème est que l’on ne peut jamais être sûr que le visiteur aura bien cette police installée sur son ordinateur ou sa tablette ou son smatphone. Il va donc falloir l’embarquer avec votre site pour la fournir à vos visiteurs.

"Mais comment réalise-t-on ce miracle ?" me direz-vous. J’y viens mais avant tout, attention :

Il faut que
- la police vous appartienne (vous l’avez achetée)
- ou que l’auteur donne l’autorisation de l’utiliser (licence libre)

Et voici quelques sites permettant de trouver son bonheur :

et il y en a d’autres, plein d’autres...

Une fois que vous avez trouver la police de la mort qui tue, il faut télécharger cette police qui est normalement fournie sous plusieurs formats pour fonctionner sur tous les navigateurs et appareils. L’idéal est d’avoir les formats suivants :

  • .eot pour IE9 et +
  • .eoteot ?#iefix pour IE6-IE8
  • . woff pour les navigateurs modernes
  • .otf pour Safari, iOS, Mobile
  • .ttf pour Firefox, Safari, iOS, Mobile
  • .svg pour iOS, Mobile

Ces polices doivent être copiées dans un dossier /squelettes/fonts (à créer)

On va ensuite rajouter ceci dans perso.css (fichier à créer s’il n’existe pas dans /squelettes/styles). Le code est bien sur à adapter avec le nom des fichiers de la police que vous utilisez.


Souvent ce code est fourni avec le jeu de polices mais il faut adapter le chemin de l’url pour les fichiers.

Voilà, maintenant, votre code

sera pris en compte partout et vous avez de jolis titres !

Et si on veut utiliser cette police sur l’ensemble du site, on utilisera ce code :


Forum
Répondre à cet article


Plan du site Contact Mentions légales Espace rédacteurs squelette

RSS Valid XHTML 1.0 Strict

2009-2017 © Escal V3 - Tous droits réservés
Site réalisé sous SPIP
avec le squelette ESCAL-V3
Version : 3.87.11