Tout d'abord il faut savoir pourquoi nous utilisons généralement des fontes dites standard lors de la création d'un site internet. En effet, lorsqu'un internaute visite un site web, son navigateur repère la police utilisée et recherche dans la machine si une telle police existe. Dans la plupart des cas les sites internet sont codé avec une police standard car il est alors plus simple pour les internautes de visualiser les pages.
Admettons qu'un site soit codé avec une police non standard et qu'un internaute visite ce site. Si ce dernier ne dispose pas de la fonte dans son ordinateur, le navigateur en choisira une par défaut et autant vous dire que le site n'aura plus du tout le même aspect. C'est pour cette raison qu'il existe une instruction CSS qui permette l'utilisation de polices personnalisées.
Cette instruction s'appelle @font-face. Ce code est accepté dans la plupart des navigateurs (IE, Firefox, Chrome, Safari...) mais visiblement pas dans tous. D'ailleurs le rendu graphique dépendra fortement du navigateur, de la carte graphique, etc. Dans l'idéal il est quand même recommandé d'utiliser des fontes standards mais si vous êtes un vrai barbu et que vous êtes vraiment décidé, voici la solution.
Les prérequis pour faire fonctionner ce code:
- Placer dans un répertoire du site la ou les fontes en question (au format eot, woff, ttf ou svg)
- Si vous n'avez pas la fonte au bon format vous pouvez aller sur le site de font squirrel afin d'uploader votre fonte et le générateur du site vous créera un petit package avec tout ce qui est nécessaire pour votre site (les fontes au bon format + une feuille CSS avec les bonnes déclaration à intégrer à votre propre feuille de style)
Rendez-vous à cette adresse pour générer les bons formats de fonte: http://www.fontsquirrel.com/tools/webfont-generator
- Avoir plusieurs navigateurs pour tester le résultat ou se rendre sur ce site pour avoir des screenshots du rendu: http://browsershots.org/
- Ouvrez votre feuille de stylle CSS
- Déclarez l'instruction comme ceci:
- Un_Nom_Pour_Votre_Fonte = Un nom cohérent avec votre fonte pour le retrouver facilement et l'inclure dans les éléments (classes, ID, etc.) du code CSSCode : Tout sélectionner
@font-face { font-family: 'Un_Nom_Pour_Votre_Fonte'; src: url('/chemin/Nom_De_La_Fonte.eot'); src: url('/chemin/Nom_De_La_Fonte.eot?#iefix') format('embedded-opentype'), url('/chemin/Nom_De_La_Fonte.woff') format('woff'), url('/chemin/Nom_De_La_Fonte.ttf') format('truetype'), url('/chemin/Nom_De_La_Fonte.svg#Un_Nom_Pour_Votre_Fonte') format('svg'); font-weight: normal; font-style: normal; }
- /chemin/Nom_De_La_Fonte = Le chemin exacte où la fonte se trouve sur le serveur
- Le ? après .eot c'est pour IE qui bêtement va chercher le reste du code (qui ne lui est pas destiné), donc grâce à cette petite astuce IE s'arrête de lire après le "?" car il faut le savoir IE ne comprend que le format eot (dont microsoft est propriétaire biensur...)
- L'ancre nommée # après .svg est importante afin que les navigateurs qui le lisent retrouvent leurs petits (SAFARI notamment). Lors de la création du package sur font squirrel il est créé automatiquement dans la feuille de style livrée avec, donc ne pas le toucher.
NOTA: Il faudra créer autant d'instruction @font-face qu'il y a de polices à utiliser - Introduction de la fonte dans une classe d'un paragraphe du site que vous avez appelé p class="ParagrapheMaFonte"
Code : Tout sélectionner
.ParagrapheMaFonte { font-family: 'Un_Nom_Pour_Votre_Fonte', Arial, Sans-Serif; }
- On déclare la classe avec .ParagrapheMaFonte
- On déclare la fonte utilisée avec font-family: 'Un_Nom_Pour_Votre_Fonte'
- Arial, Sans-Serif; sert de police par défaut si des fois votre police personnalisée venait à ne pas se lancer, auquel cas le navigateur passe sur la police suivante qui dans ce cas est Arial (qui elle est une police dite standard)
Voilà, vous êtes fin prêt à utiliser des polices personnalisées pour vos sites et pourrir la lecture à vos internautes avec des fontes illisibles