Comment héberger des polices Web Google sur mon propre serveur?
Je dois utiliser des polices Google sur une application intranet. Les clients peuvent ou non avoir une connexion Internet. En lisant les termes de la licence, il semble que c'est légalement autorisé.
S'il vous plaît gardez à l'esprit que ma réponse a beaucoup vieilli.
Vous trouverez ci-dessous d'autres réponses plus sophistiquées sur le plan technique, par exemple:
alors ne laissez pas le fait que cela soit la réponse actuellement acceptée vous donne l’impression que c’est toujours la meilleure.
Vous pouvez également télécharger le jeu de polices complet de Google via github à l’emplacement google/font . Ils fournissent également un instantané ~ 360 Mo Zip de leurs polices .
Vous commencez par télécharger votre sélection de polices sous forme de package compressé, ce qui vous fournit un grand nombre de polices True Type. Copiez-les dans un endroit public, quelque part où vous pouvez créer un lien depuis votre css.
Sur la page de téléchargement de google webfont, vous trouverez un lien d'inclusion comme suit:
http://fonts.googleapis.com/css?family=Cantarell:400,700,400italic,700italic|Candal
Il est lié à un CSS définissant les polices via un ensemble de définitions @font-face.
Ouvrez-le dans un navigateur pour les copier et les coller dans votre propre CSS et modifiez les URL pour inclure le bon fichier de police et les bons types de format.
Donc ça:
@font-face {
font-family: 'Cantarell';
font-style: normal;
font-weight: 700;
src: local('Cantarell Bold'), local('Cantarell-Bold'), url(http://themes.googleusercontent.com/static/fonts/cantarell/v3/Yir4ZDsCn4g1kWopdg-ehHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
devient ceci:
/* Your local CSS File */
@font-face {
font-family: 'Cantarell';
font-style: normal;
font-weight: 700;
src: local('Cantarell Bold'), local('Cantarell-Bold'), url(../font/Cantarell-Bold.ttf) format('truetype');
}
Comme vous pouvez le constater, l’hébergement des polices sur votre propre système a pour inconvénient de vous limiter au format True Type, tandis que le service Google WebFont détermine, en fonction du périphérique qui accède, les formats qui seront transmis.
De plus, j'ai dû ajouter un fichier .htaccess à mon répertoire contenant les polices contenant des types mime pour éviter les erreurs dans les outils de développement Chrome.
Pour cette solution, seul le type true est nécessaire, mais définir davantage ne présente aucun inconvénient lorsque vous souhaitez également inclure différentes polices, telles que font-awesome.
#.htaccess
AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff
Il existe un outil localfont.com pour vous aider à télécharger toutes les variantes de polices. Il génère également le CSS correspondant pour la mise en œuvre. obsolète
localfont est en panne. Comme le suggère Damir suggère , vous pouvez utiliser google-webfonts-helper
La solution idéale est google-webfonts-helper .
Il vous permet de sélectionner plusieurs variantes de police, ce qui vous fait gagner beaucoup de temps.
J'ai écrit un script bash qui récupère le fichier CSS sur les serveurs de Google avec différents agents utilisateurs, télécharge les différents formats de police dans un répertoire local et écrit un fichier CSS y compris. Notez que le script nécessite Bash version 4.x.
Voir https://neverpanic.de/blog/2014/03/19/downloading-google-web-fonts-for-local-hosting/ pour le script (je ne le reproduis pas ici, je n'ai donc que pour le mettre à jour à un endroit lorsque j'en ai besoin).
Edit: Déplacé vers https://github.com/neverpanic/google-font-download
Le contenu du fichier CSS (à partir de l'URL d'inclusion) dépend du navigateur par lequel je le visualise. Par exemple, lorsque vous naviguez sur http://fonts.googleapis.com/css?family=Open+Sans en utilisant Chrome, le fichier ne contenait que des liens WOFF. En utilisant Internet Explorer (ci-dessous), il incluait à la fois EOT et WOFF. J'ai collé tous les liens dans mon navigateur pour les télécharger.
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot);
src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
Lorsque vous hébergez vos propres polices Web, vous devez associer correctement chaque type de police , gérer les problèmes de navigateur hérités, etc. Lorsque vous utilisez Google Web Fonts (hébergé par Google), Google lie automatiquement les types de police appropriés. pour ce navigateur.
Il est légalement autorisé tant que vous vous en tenez aux termes de la licence de la police, généralement la FTO.
Vous aurez besoin d'un ensemble de formats de police Web, et le Font Squirrel Webfont Generator peut les produire.
Mais la liste de contrôle de fichier (OFL) exigeait que les polices soient renommées si elles sont modifiées, et l’utilisation du générateur signifie leur modification.
J'ai un script écrit en PHP similaire à celui de @neverpanic qui télécharge automatiquement à la fois le CSS et les polices (les deux ont été suggérés et non) de Google. Il sert ensuite les polices CSS et les polices correctes à partir de votre propre serveur basé sur l'agent d'utilisateur. Il conserve son propre cache afin que les polices et CSS d'un agent utilisateur ne soient téléchargés qu'une seule fois.
C'est à un stade prématuré, mais on peut le trouver ici: DaAwesomeP/php-offline-fonts
Ma solution consistait à télécharger les fichiers TTF à partir de polices Web Google, puis à utiliser onlinefontconverter.com .
Vous pouvez réellement télécharger toutes les variantes de format de police directement à partir de Google et les inclure dans votre css à servir depuis votre serveur. De cette façon, vous n'avez pas à vous soucier du suivi des utilisateurs de votre site par Google. Cependant, l’inconvénient est peut-être de ralentir votre vitesse de service. Les polices exigent beaucoup de ressources. Je n'ai pas encore fait de tests dans ce numéro, et je me demande si quelqu'un a des pensées similaires.
Si vous souhaitez héberger toutes les polices (ou certaines d'entre elles) sur votre propre serveur, téléchargez-les à partir de ce dépôt et utilisez-les comme vous le souhaitez: https://github.com/praisedpk/Local-Google-Fonts
Si vous utilisez Webpack, ce projet pourrait vous intéresser: https://github.com/KyleAMathews/typefaces
Par exemple. dites que vous voulez utiliser la police Roboto:
npm install typeface-roboto --save
Ensuite, importez-le simplement dans le point d'entrée de votre application (fichier js principal):
import 'typeface-roboto'
J'ai créé un petit script PHP pour obtenir les liens de téléchargement à partir d'une URL d'importation Google Fonts, telle que: https://fonts.googleapis.com/css?family=Roboto:400,700|Slabo+27px|Lato:400,300 italic, 900italic
Vous pouvez utiliser cet outil ici: http://nikoskip.me/gfonts.php
Par exemple, si vous utilisez l'URL d'importation ci-dessus, vous obtiendrez ceci:
J'ai utilisé grunt-local-googlefont dans une tâche grunt.
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
"local-googlefont" : {
"opensans" : {
"options" : {
"family" : "Open Sans",
"sizes" : [
300,
400,
600
],
"userAgents" : [
"Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0)", //download eot
"Mozilla/5.0 (Linux; U; Android 4.1.2; nl-nl; GT-I9300 Build/JZO54K) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30", //download ttf
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1944.0 Safari/537.36" //download woff and woff2
],
"cssDestination" : "build/fonts/css",
"fontDestination" : "build/fonts",
"styleSheetExtension" : "css",
"fontDestinationCssPrefix" : "fonts"
}
}
}
});
grunt.loadNpmTasks('grunt-local-googlefont');
};
Ensuite, pour les récupérer:
grunt local-googlefont:opensans
Notez que j'utilise un fork de l'original, qui fonctionne mieux lors de la récupération de polices avec des espaces dans leur nom.
Vous pouvez télécharger les polices source à partir de https://github.com/google/fonts
Utilisez ensuite l'outil font-ranger pour fractionner votre police Unicode volumineuse en plusieurs sous-ensembles (par exemple, latin, cyrillic). Vous devriez faire ce qui suit avec l'outil:
- Générez des sous-ensembles pour chaque langue prise en charge
- Utilisez un sous-ensemble de plage unicode pour économiser de la bande passante
- Supprimez bloat de vos polices et optimisez-les pour le Web
- Convertissez vos polices au format woff2 compressé
- Fournir une solution de remplacement .woff aux anciens navigateurs
- Personnaliser le chargement et le rendu des polices
- Générer un fichier CSS avec les règles @ font-face
- Polices Web Self-Host ou utilisez-les localement
Font-Ranger: https://www.npmjs.com/package/font-ranger
P.S. Vous pouvez également automatiser cela en utilisant l'API Node.js
Il existe un script très simple, écrit en langage Java clair, permettant de télécharger toutes les polices à partir d'un lien de police Google Web (plusieurs polices prises en charge). Il télécharge également le fichier CSS et l’adapte aux fichiers locaux. L'agent utilisateur peut être adapté pour obtenir également d'autres fichiers que seulement WOFF2. Voir https://github.com/ssc-hrep3/google-font-download
Les fichiers résultants peuvent facilement être ajoutés à un processus de construction (par exemple, une compilation Webpack telle que vue-webpack ).
En plus de k0pernicus je voudrais suggérer le mieux servi - local . C'est également un script bash (v4) permettant aux opérateurs de serveurs Web de télécharger et de gérer les polices Web Google à partir de leur propre serveur Web. Mais en plus de l’autre script bash, il permet à l’utilisateur d’automatiser entièrement (via cron et autres) la diffusion de fichiers de polices et de fichiers css actualisés.