S'affranchir de fonts.googleapis.com

Lors de l'une de nos actions, nous avons souvent rencontré le code source suivant dans des pages web :

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700" media="print, screen">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700" media="print, screen">

Celles-ci servent à intégrer des polices d'écriture sur le site web. Il n'y a donc aucune utilité autre qu'esthétique pour le site web concerné. Ce qui est inquiétant, c'est que pour une si petite chose, simple à réaliser et sans aucune importance, autant de sites web se rendent dépendants des serveurs de Google ! Pour les novice et pour montrer aux visiteurs non-codeurs, voilà comment s'affranchir des polices de caractère de Google.

Les 2 lignes de code précédentes vont chacune chercher un fichier CSS (une feuille de style) sur un serveur de Google. En suivant simplement l'adresse URL de ces lignes vous obtiendrez directement le contenu. Voici le contenu de ces 2 fichiers que j'ai naturellement renommé de manière explicite :

open_sans.css

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'), url(https://fonts.gstatic.com/s/opensans/v17/memnYaGs126MiZpBA-UFUKWyV9hrIqY.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(https://fonts.gstatic.com/s/opensans/v17/mem6YaGs126MiZpBA-UFUK0Zdcg.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(https://fonts.gstatic.com/s/opensans/v17/memnYaGs126MiZpBA-UFUKWiUNhrIqY.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UN_r8OUuhs.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVZ0e.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UN7rgOUuhs.ttf) format('truetype');
}

open_sans_condensed.css

@font-face {
  font-family: 'Open Sans Condensed';
  font-style: italic;
  font-weight: 300;
  src: local('Open Sans Condensed Light Italic'), local('OpenSansCondensed-LightItalic'), url(https://fonts.gstatic.com/s/opensanscondensed/v14/z7NHdQDnbTkabZAIOl9il_O6KJj73e7Fd_-7suD8Rb2Q.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Condensed Light'), local('OpenSansCondensed-Light'), url(https://fonts.gstatic.com/s/opensanscondensed/v14/z7NFdQDnbTkabZAIOl9il_O6KJj73e7Ff1GhDuXMQg.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Condensed Bold'), local('OpenSansCondensed-Bold'), url(https://fonts.gstatic.com/s/opensanscondensed/v14/z7NFdQDnbTkabZAIOl9il_O6KJj73e7Ff0GmDuXMQg.ttf) format('truetype');
}

Il nous semble qu'il n'y a rien de bien compliqué pour récupérer le contenu de ces 2 fichiers et de les mettre directement sur le serveur des sites web concernés. Il est aussi possible de faire un simple copier/coller de ce contenu dans le <head> des pages de ces mêmes sites. Il est encore possible de fusionner ces deux fichiers en un seul.

A partir de là, il est tout aussi simple de récupérer les fichiers “TrueType” de ces polices de caractères. Encore une fois, il suffit de suivre les adresses URL de chacune de ces polices de caractère pour les télécharger. Là aussi, Nous les avons renommé de manière explicite pour que l'on sache ce à quoi chacun d'eux correspondent. Les voici :

01_open_sans_light_italic.ttf (~24.9 KB)
02_open_sans_italic.ttf (~25.1 KB)
03_open_sans_bold_italic.ttf (~25.3 KB)
04_open_sans_light.ttf (~27.5 KB)
05_open_sans_regular.ttf (~26.5 KB)
06_open_sans_bold.ttf (~28.2 KB)
07_open_sans_condensed_light_italic.ttf (~24.5 KB)
08_open_sans_condensed_light.ttf (~27.5 KB)
09_open_sans_condensed_bold.ttf (~31.4 KB)

Il suffit de les mettre sur les serveurs des sites web concernés et de modifier les url() dans les fichiers CSS précédants pour qu'ils pointent sur les fichiers “TrueType” correspondants.

Tout cela prend environ 10 à 15 minutes en partant uniquement des 2 lignes de code de départ. Il n'y a vraiment rien de compliqué à tout cela !