Par défaut, Escal utilise les familles de polices suivantes : 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 !"

#titre-rubrique, #titre-article {
font-family: 'texgyreadventorregular';
}

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 smartphone. 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 :

Et voici quelques sites permettant de trouver son bonheur :

• FontSquirrel
• dafont.com
• FreeTypography
• Font Library
• Google Fonts

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

Cas général

Une fois que vous avez trouvé 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.

@font-face {
    font-family: 'texgyreadventorregular';
    src: url('../fonts/texgyreadventor-regular-webfont.eot');
    src: url('../fonts/texgyreadventor-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/texgyreadventor-regular-webfont.woff') format('woff'),
         url('../fonts/texgyreadventor-regular-webfont.ttf') format('truetype'),
         url('../fonts/texgyreadventor-regular-webfont.svg#texgyreadventorregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Voilà, maintenant, votre code

#titre-rubrique, #titre-article {
font-family: 'texgyreadventorregular';
}

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 :

body {
font-family: 'texgyreadventorregular';
}

Cas particulier des sites de l’Éducation Nationale

L’Éducation Nationale s’est dotée d’une police de caractères : la police Marianne© qui a été développée pour un usage exclusif par les acteurs de la sphère étatique. Elle n’est donc pas utilisable sur d’autres sites. C’est celle qui est utilisée sur ce site.

Pour l’utiliser sur son site, il faut :

• copier le fichier Marianne-Regular.otf dans /squelettes/fonts
• ajouter ce code dans le fichier perso.css

@font-face {
	font-family: 'Marianne';
		src: url('../fonts/Marianne-Regular.otf') format("truetype");
}
body {
	font-family: 'Marianne';
}

Et pour avoir des caractères gras bien visibles, vous devrez

• copier le fichier Marianne-Bold.otf dans /squelettes/fonts
• ajouter ce code dans le fichier perso.css

@font-face {
	font-family: 'Marianne-Bold';
		src: url('../fonts/Marianne-Bold.otf') format("truetype");
}
strong{
	font-family: 'Marianne-Bold';
}

et le tour est joué !