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'; }