Mémo pour utiliser les polices de caractères Google en local au lieu d’appeler un lien css vers fonts.googleapis.com.
Il est facile d’utiliser un lien direct vers fonts.googleapis.com dans un page web pour utiliser les fonts proposées par Google.
Ils sont disponibles à cette adresse : https://www.google.com/fonts
C’est d’ailleurs très utiles pour réduire les temps de chargement d’une page web.
Mais si on veut utiliser ces polices de caractères sur un intranet sans accès internet, cela devient impossible.
Voici une astuce pour y arriver.
Prenons l’exemple de la police de caractères « Open Sans« .
La ligne fournie par Google et à insérer dans l’en-tête de votre page web est la suivante :
1 |
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> |
Copiez l’url et collez-la dans votre navigateur : https://fonts.googleapis.com/css?family=Open+Sans
Le résultat est le suivant :
1 2 3 4 5 6 |
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'); } |
Copiez l’url située sur la ligne src : https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2
Coller-la dans votre navigateur et validez.
Enregistrez la police sur votre poste en la renommant comme spécifié dans le paramètre ‘Local’ de la même ligne pour avoir : OpenSans.woff2
Transférez votre police de caractère sur votre serveur qui héberge votre intranet, généralement dans le répertoire ./fonts
Dans le fichier css principal ou un fichier fonts.css créé pour l’occasion, copiez / collez les lignes css fournies par Google.
Modifiez l’url comme suit :
1 2 3 4 5 6 |
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: local('Open Sans'), local('OpenSans'), url(../fonts/OpenSans.woff2) format('woff2'); } |
Ajustez le chemin en fonction de votre arborescence.
Dans l’exemple, le fichier css se situe dans un répertoire ./css et appel la police de caractères stockée dans le répertoire ./fonts
Au lieu la ligne fournie par Google, insérez cette ligne dans votre page html :
1 |
<link href="css/fonts.css" rel="stylesheet" type='text/css'> |
Là encore, il faut adapter le lien en fonction de votre structure.
Pour la prise en compte avec Apache, éditez le fichier ./.htaccess et ajoutez ces lignes :
1 2 3 4 5 |
AddType application/vnd.ms-fontobject .eot AddType font/ttf .ttf AddType font/otf .otf AddType application/x-font-woff .woff AddType application/x-font-woff2 .woff2 |
Vérifiez à l’aide des outils de développement fournis par votre navigateur, onglet « Réseau » pour Firefox, FireBug ou Internet Explorer que votre police de caractères est correctement appelée par votre navigateur.
Merci pour cet article, j’ai recherché un moment la façon de pouvoir intégrer une « font » sur mon FTP directement.
Cette façon fonctionne très bien et me fait passer a 85% sur PageSpeed Insights en mobile et 95% pour ordinateur 🙂
Je retweet avec plaisir l’article et merci Jérôme pour cette astuce précieuse.
Ravis que mon mémo ait pu aider.
Oui et pour vraiment bien arrondir les angles j’ai inclus directement le contenu de la font dans le CSS principal sinon le validateur W3C se montre méchant ^^
Merci pour l’info !