Ico JavaScript
Ico CSS
Ico HTML
Ico mooTools
Ico PHP
Ico Astuces

Héberger et lier sa propre police personnalisée

Date 03/05/2015
Ico CSS
Ico HTML
Comms 0 commentaire

L'utilisation des polices Google Fonts est certes très pratique et rapide à mettre en oeuvre, mais elle ne se fait qu'au péril du temps de réponse de vos pages qui pour s'afficher correctement doivent contacter les serveurs Google hébergeant vos polices.


Il existe une règle CSS appelée @font-face qui permet de créer un lien entre un fichier contenant une police de caractères et le nom d'un font-family défini dans votre code CSS.


Imaginons qu'on ait à notre disposition un fichier de police de caractère au format TTF (police truetype), on va commencer par convertir ce fichier TTF aux différents formats de polices exploités par les navigateurs les plus courants. Pour ce faire, rendez vous sur un site de conversion comme font2web par exemple (il en existe d'autres), envoyez votre fichier TTF et il vous convertira cela en EOT, OTF, SVG et WOFF.


Ensuite on va transférer nos différents fichiers de police (5 formats différents donc) sur notre hébergement, et dans notre source CSS on va ajouter :

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


Les différentes infos données dans cette règle CSS indiquent le nom de la police à utiliser en font-family (propriété font-family), les différents fichiers vers kes dufférents formats (propriété src), et le style de la police par défaut (font-weight et font-style).


Une fois ceci fait il ne reste plus qu'à créer une classe spécifique à la police, ou si on veut que le site entier utilise cette police appliquer le font-family au body :

body { font-family: 'mapoliceperso'; font-size: 15px; }
.mapolice { font-family: 'mapoliceperso'; }


Vous avez aimé ce billet ?

 

Vous aimerez peut être...
> Intégrer des polices de caractère personnalisées
> Génération d'une bannière texte
> ComboxBox de choix d'images
> ComboBox pour envoi de fichiers
> Maintenir une session PHP active via Request
 

Mot-clefs de ce billet...
dossier family fonts format mapolice police

Commentaires


Aucun commentaire...


Ajouter un commentaire


La validation des commentaires se fait automatiquement, suite à la validation d'un « captcha » qui permet de filtrer le spam. La publication de votre commentaire se fera ensuite automatiquement. L'administrateur du blog se réserve toutefois le droit de supprimer votre commentaire après publication s'il contrevient à nos condition d'utilisation ou s'il est considéré comme spam.

Auteur
Email
 
(facultatif et caché)
Site web
 
(facultatif)
Message

Ico Valider


MP  Mighty Productions
> Blogs
> Partage de codes sources - PHP / JS / mooTools
> CSS
> Héberger et lier sa propre police personnalisée
 
RSS       Mentions légales       Comms  Haut de la page  
◄