Ce mémo a été publié le 9 septembre 2015 et peut contenir des informations qui peuvent être incomplètes, non mises à jour voir erronées du fait de son ancienneté. N'hésitez pas à compléter votre recherche sur des articles plus récents.
5/5 - (1 vote)

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 :

Copiez l’url et collez-la dans votre navigateur : https://fonts.googleapis.com/css?family=Open+Sans
Le résultat est le suivant :

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 :

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 :

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 :

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.