Comment héberger les polices Web Google sur mon propre serveur?


271

J'ai besoin d'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 cela soit légalement autorisé.


6
Ce que je comprends, c'est que ce n'est pas aussi simple que de télécharger un fichier et de l'enregistrer. Chaque navigateur prend en charge un format de police différent et Google ne fournit pas un moyen direct et facile d'obtenir tous les fichiers nécessaires pour que la police fonctionne correctement dans tous les navigateurs.
Samarth Bhargava

1
Vous obtenez tous les URI de la feuille de style liée.
fuxia

38
Oui, je peux comprendre tous les détails moi-même, ou je peux poser une question pour voir si quelqu'un l'a déjà fait et a des expériences et des scripts à partager
Samarth Bhargava

2
Eh bien, Google renvoie différentes réponses en fonts.googleapis.com/css?fonction de vos en-têtes UA (lire: votre navigateur)) Ils ne fournissent donc que ce dont le navigateur actuel a besoin. Si l'on veut obtenir toutes les polices nécessaires (ou même seulement les URL), vous aurez besoin de plusieurs chargements du fichier css à partir de différents navigateurs resp. avec différents en-têtes forgés, pour obtenir tout ce dont vous avez besoin.
Frank Nocke

Réponses:


218

Veuillez garder à l'esprit que ma réponse a beaucoup vieilli.

Il existe d'autres réponses plus sophistiquées techniquement ci-dessous, par exemple:

alors ne laissez pas le fait que c'est la réponse actuellement acceptée vous donner l'impression que c'est toujours la meilleure.


Vous pouvez également maintenant également télécharger l'ensemble des polices de google via github dans leur référentiel google / font . Ils fournissent également un instantané ~ 420 Mo de leurs polices .


Vous téléchargez d'abord votre sélection de polices sous forme de package zippé, vous fournissant un tas de polices de type vrai. Copiez-les quelque part public, quelque part, vous pouvez lier à partir de votre CSS.

Sur la page de téléchargement de Google Webfont, vous trouverez un lien d'inclusion comme ceci:

http://fonts.googleapis.com/css?family=Cantarell:400,700,400italic,700italic|Candal

Il relie à un CSS définissant les polices via un tas de @font-facedéfinitions.

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 voir, un inconvénient de l'hébergement des polices sur votre propre système de cette façon est que vous vous limitez au véritable format de type, tandis que le service google webfont détermine par l'appareil d'accès quels formats seront transmis.

De plus, j'ai dû ajouter un .htaccessfichier dans mon répertoire contenant les polices contenant les types MIME pour éviter que des erreurs n'apparaissent dans Chrome Dev Tools.

Pour cette solution, seul le vrai type est nécessaire, mais la définition de plus ne fait pas de mal lorsque vous souhaitez également inclure différentes polices, comme font-awesome.

#.htaccess
AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff

37
Vous n'êtes pas limité à TrueType, vous avez juste besoin de télécharger également les fichiers .woff, c'est-à-dire. mettez 'http: //themes.googleusercontent.com/static/fonts/cantarell/v3/...80lGh-uXM.woff' dans votre navigateur Web, enregistrez-le sous '/fonts/Cantarell-Bold.woff' et mettez à jour le css pour correspondre (url ('/ fonts / Canterell-Bold.woff'))
Anthony Briggs

2
Il y a une raison pour laquelle Google propose plusieurs formats de police - TrueType ne fonctionne pas sur les anciens navigateurs . WOFF est la norme W3C.
Michael McGinnis

3
Faites défiler jusqu'à la solution de script bash - génial!
Dr.Max Völkel

3
Le fichier change de contenu en fonction du navigateur utilisé.
Krii

3
Cette réponse est plus complexe à déployer que les alternatives répertoriées ci-dessous; il est également techniquement incorrect à plusieurs égards (pas de limitation au TTF, le TTF est une mauvaise idée, cela donnera des résultats différents par navigateur, vous ne pouvez pas héberger de polices n'importe où dans le public car la même origine s'applique). Veuillez ne pas le faire, utilisez l'une des autres réponses ci-dessous.
Robin Berjon

202

Il existe un outil localfont.com pour vous aider à télécharger toutes les variantes de police. Il génère également le CSS correspondant pour l'implémentation. obsolète

localfont est en panne. Au lieu de cela, comme le suggère Damir , vous pouvez utiliser google-webfonts-helper



Bien que fantastique, lorsque vous avez besoin d'autres versions linguistiques de votre police, vous devez trouver une autre solution
anges244

Qu'en est-il des différents jeux de caractères?
vitro

1
Ici, le développeur Google affirme que l' auto-hébergement des polices Google a ses propres inconvénients , consultez plutôt ces conseils pour utiliser la police Google CDN et augmenter la vitesse de la page.
shaijut

@PauloCoghi L'outil peut signaler que le site Web est accessible mais il est clair qu'il y a quelque chose qui ne va pas puisque moi et beaucoup d'autres ne pouvons pas le voir.
Lawyerson

148

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.


Grands outils! J'aime cela. Vous pouvez voir l'aperçu des polices et télécharger tous les fichiers requis en un seul clic.
cuixiping

Très bel outil. Fonctionne très bien et permet également de télécharger des latin-extpolices.
piotrekkr

3
C'est la meilleure solution. Il fait tout, vous pouvez même spécifier le préfixe du dossier de polices.
Maciej Krawczyk

63

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 en les incluant. Notez que le script nécessite la version 4.x de Bash.

Voir https://neverpanic.de/blog/2014/03/19/downloading-google-web-fonts-for-local-hosting/ pour le script (je ne le reproduis pas ici donc je n'ai qu'à le mettre à jour dans un endroit quand j'en ai besoin).

Modifier: déplacé vers https://github.com/neverpanic/google-font-download


4
C'est plus que génial! (J'espère que ça marche bien pas encore testé). J'ai cherché quelque chose comme ce formulaire de temps en temps au fil des ans. Sans blague, j'ai même commencé à écrire mon propre script qui est loin d'être terminé. Son esprit souffle que si peu de gens ont tendance à vouloir cela. Google cache ces polices derrière les chaînes générées et ne fait pas open source les fichiers de police Web dans le référentiel uniquement le ttf. Ils veulent que nous utilisions leurs polices, ils veulent que nous utilisions leurs serveurs parce qu'ils en abusent pour suivre les gens. Et même les personnes les plus soucieuses de la confidentialité intègrent les polices du serveur Google.
redanimalwar

1
Ma seule préoccupation est les licences de polices réelles, pas vraiment étudiées de près. Tout ce que je sais, c'est que les licences de polices diffèrent de la GPL ou du MIT. Alors, sommes-nous légalement autorisés à attraper ces polices sur les serveurs Google et à les servir nous-mêmes? Encore une fois, je ne crois pas une minute que Google donne toutes ces polices juste pour améliorer le monde, ils paient en fait des développeurs pour produire des polices ouvertes pour eux afin qu'ils aient à coup sûr quelque chose à gagner, beaucoup de données. Et si ce n'est pas le cas, vous pouvez tester ces polices localement sans Internet de cette façon.
redanimalwar

2
Cette réponse devrait être plus appréciée, car ce script peut télécharger tous les formats de polices et sous-ensembles contrairement à localfont.com.
piotrekkr

Je sais que vous me prendrez comme une personne paresseuse, mais en tant qu'utilisateur Windows moyen, ça craint d'avoir à le compiler et etc pour pouvoir l'utiliser ...
Lucas Bustamante

@LucasB Aucune compilation n'est impliquée. C'est un script bash. Je sais que Windows n'est pas fourni avec Bash, mais n'hésitez pas à le réimplémenter d'une manière qui prend en charge Windows. Cela ne faisait tout simplement pas partie de mon cas d'utilisation, donc je n'y ai pas consacré de temps.
Neverpanic

14

Le contenu du fichier CSS (à partir de l'URL incluse) dépend du navigateur à partir duquel je le visualise. Par exemple, lorsque vous accédez à http://fonts.googleapis.com/css?family=Open+Sans à l' aide de Chrome, le fichier ne contient que des liens WOFF. En utilisant Internet Explorer (ci-dessous), il comprenait à 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 lier correctement à chaque type de police , gérer les bogues de navigateur hérités, etc. Lorsque vous utilisez Google Web Fonts (hébergé par Google), Google établit automatiquement des liens vers les types de police appropriés pour ce navigateur.


1
+1 pour le lien vers cet article qui explique le code CSS "universel" à utiliser et un code "réduit" pour les navigateurs modernes!
ItalyPaleAle

2
Je devrai donc servir intelligemment le navigateur avec un format différent. Je sais que c'est très découragé mais nous servons notre page à certains clients chinois et c'est la principale raison pour laquelle nous voulons l'héberger. Ils ont bloqué la plupart des ressources Google.
Lionel Chan

6

Il est légalement autorisé tant que vous respectez les termes de la licence de la police - généralement l'OFL.

Vous aurez besoin d'un ensemble de formats de polices Web, et le générateur de polices Web Squirrel peut les produire.

Mais l'OFL exigeait que les polices soient renommées si elles étaient modifiées, et l'utilisation du générateur signifie les modifier.


Ou, selon la police, vous pouvez simplement obtenir le kit Webfont directement à partir de l'écureuil de police. fontsquirrel.com/fonts/open-sans
Jack Frost

3

J'ai un script écrit en PHP similaire à celui de @neverpanic qui télécharge automatiquement à la fois le CSS et les polices (avec ou sans indice ) de Google. Il sert ensuite le CSS et les polices corrects à partir de votre propre serveur en fonction de l'agent utilisateur. Il conserve son propre cache, de sorte que les polices et CSS d'un agent utilisateur ne seront téléchargés qu'une seule fois.

C'est à un stade prématuré, mais vous pouvez le trouver ici: DaAwesomeP / php-offline-fonts


2

Comme vous souhaitez héberger toutes les polices (ou certaines d'entre elles) sur votre propre serveur, vous pouvez télécharger des polices à partir de ce référentiel et les utiliser comme vous le souhaitez: https://github.com/praisedpk/Local-Google-Fonts

Si vous souhaitez simplement résoudre ce problème afin de résoudre le problème de mise en cache du navigateur fourni avec les polices Google, vous pouvez utiliser d'autres polices CDN et inclure des polices telles que:

<link href="https://pagecdn.io/lib/easyfonts/fonts.css" rel="stylesheet" />

Ou une police spécifique, comme:

<link href="https://pagecdn.io/lib/easyfonts/lato.css" rel="stylesheet" />

1

J'ai utilisé grunt-local-googlefont dans une tâche de grognement.

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

Remarque, j'utilise une fourchette de l'original, qui fonctionne mieux lors de la récupération des polices avec des espaces dans leurs noms.


1

Vous pouvez réellement télécharger toutes les variantes de format de police directement à partir de Google et les inclure dans votre CSS pour servir à partir de 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 peut ralentir votre propre vitesse de portion. Les polices sont assez exigeantes en ressources. Je n'ai pas encore fait de tests dans ce numéro, et je me demande si quelqu'un a des idées similaires.




1

Si vous utilisez Webpack, vous pourriez être intéressé par ce projet: https://github.com/KyleAMathews/typefaces

Par exemple, dites que vous souhaitez utiliser la police Roboto:

npm install typeface-roboto --save

Il suffit ensuite de l'importer dans le point d'entrée de votre application (fichier js principal):

import 'typeface-roboto'

1

Vous pouvez suivre le script développé en PHP. Où vous pouvez télécharger toutes les polices Google en utilisant le script. Il téléchargera les polices et créera un fichier CSS et une archive à compresser.
Vous pouvez télécharger le code source depuis le GitHub https://github.com/sourav101/google-fonts-downloader

$obj = new GoogleFontsDownloader;

if(isset($_GET['url']) && !empty($_GET['url']))
{
    $obj->generate($_GET['url']);
}

if(isset($_GET['download']) && !empty($_GET['download']) && $_GET['download']=='true')
{
    $obj->download();
}

/**
* GoogleFontsDownloader
* Easy way to download any google fonts.
* @author     Shohrab Hossain
* @version    1.0.0 
*/
class GoogleFontsDownloader
{
    private $url      = '';
    private $dir      = 'dist/';
    private $fontsDir = 'fonts/';
    private $cssDir   = 'css/';
    private $fileName = 'fonts.css';
    private $content  = '';
    private $errors   = '';
    private $success  = '';
    public  $is_downloadable  = false;

    public function __construct()
    {
        ini_set('allow_url_fopen', 'on');
        ini_set('allow_url_include', 'on');
    }

    public function generate($url = null)
    {
        if (filter_var($url, FILTER_VALIDATE_URL) === FALSE) 
        {
            $this->errors .= "<li><strong>Invalid url!</strong> $url</li>";
        }
        else
        {
            $this->url = $url;
            // delete previous files
            $this->_destroy();
            // write font.css
            $this->_css();
            // write fonts
            $this->_fonts();
            // archive files
            $this->_archive();
        }  
        // show all messages
        $this->_message();
    }

    public function download()
    { 
        // Download the created zip file
        $zipFileName = trim($this->dir, '/').'.zip';
        if (file_exists($zipFileName))
        {
            header("Content-type: application/zip");
            header("Content-Disposition: attachment; filename = $zipFileName");
            header("Pragma: no-cache");
            header("Expires: 0");
            readfile("$zipFileName");

            // delete file 
            unlink($zipFileName);
            array_map('unlink', glob("$this->dir/*.*"));
            rmdir($this->dir);

        } 
    }   

    private function _archive()
    {
        if (is_dir($this->dir))
        {
            $zipFileName = trim($this->dir, '/').'.zip';
            $zip = new \ZipArchive(); 
            if ($zip->open($zipFileName, ZipArchive::CREATE) === TRUE) 
            {
                $zip->addGlob($this->dir. "*.*");
                $zip->addGlob($this->dir. "*/*.*");
                if ($zip->status == ZIPARCHIVE::ER_OK)
                {
                    $this->success .= '<li>Zip create successful!</li>';
                    $this->is_downloadable = true;
                }
                else 
                {
                    $this->errors .= '<li>Failed to create to zip</li>';
                } 
            } 
            else 
            {
                $this->errors .= '<li>ZipArchive not found!</li>';
            }  
            $zip->close(); 
        }
        else
        {
            $this->errors .= "<li><strong>File</strong> not exists!</li>";
        } 
    }   

    private function _css()
    {  
        $filePath = $this->dir.$this->cssDir.$this->fileName;
        $content  = $this->_request($this->url);
        if (!empty($content))
        {
            if (file_put_contents($filePath, $content))
            {
                $this->success .= "<li>$this->fileName generated successful!</li>";
                $this->content = $content; 
            }
            else
            {
                $this->errors .= '<li>Permission errro in $this->fileName! Unable to write $filePath.</li>';
            }
        }
        else
        {
            $this->errors .= '<li>Unable to create fonts.css file!</li>';
        }
    }

    private function _fonts()
    {
        if (!empty($this->content))
        {
            preg_match_all('#\bhttps?://[^\s()<>]+(?:\([\w\d]+\)|([^[:punct:]\s]|/))#', $this->content, $match);
            $gFontPaths = $match[0];
            if (!empty($gFontPaths) && is_array($gFontPaths) && sizeof($gFontPaths)>0)
            {
                $count = 0;
                foreach ($gFontPaths as $url) 
                {
                    $name     = basename($url);
                    $filePath = $this->dir.$this->fontsDir.$name;
                    $this->content = str_replace($url, '../'.$this->fontsDir.$name, $this->content);

                    $fontContent  = $this->_request($url);
                    if (!empty($fontContent))
                    {
                        file_put_contents($filePath, $fontContent);
                        $count++;
                        $this->success .= "<li>The font $name downloaded!</li>";
                    }
                    else
                    {
                        $this->errors .= "<li>Unable to download the font $name!</li>";
                    } 
                }

                file_put_contents($this->dir.$this->cssDir.$this->fileName, $this->content);
                $this->success .= "<li>Total $count font(s) downloaded!</li>";
            }
        }
    }

    private function _request($url)
    {
        $ch = curl_init(); 
        curl_setopt_array($ch, array(
            CURLOPT_SSL_VERIFYPEER => FALSE,
            CURLOPT_HEADER         => FALSE,
            CURLOPT_FOLLOWLOCATION => TRUE,
            CURLOPT_URL            => $url,
            CURLOPT_REFERER        => $url,
            CURLOPT_RETURNTRANSFER => TRUE,
        ));
        $result = curl_exec($ch);
        curl_close($ch);

        if (!empty($result))
        {
            return $result;
        } 
        return false;
    }

    private function _destroy()
    {
        $cssPath = $this->dir.$this->cssDir.$this->fileName;
        if (file_exists($cssPath) && is_file($cssPath))
        {
            unlink($cssPath);
        } 
        else
        {
            mkdir($this->dir.$this->cssDir, 0777, true);
        }

        $fontsPath = $this->dir.$this->fontsDir;
        if (!is_dir($fontsPath))
        {
            mkdir($fontsPath, 0777, true);
        }
        else
        {
            array_map(function($font) use($fontsPath) {
                if (file_exists($fontsPath.$font) && is_file($fontsPath.$font))
                {
                    unlink($fontsPath.$font);
                }
            }, glob($fontsPath.'*.*')); 
        }
    }

    private function _message()
    {
        if (strlen($this->errors)>0)
        {
            echo "<div class='alert alert-danger'><ul>$this->errors</ul></div>";
        }  
        if (strlen($this->success)>0)
        {
            echo "<div class='alert alert-success'><ul>$this->success</ul></div>";
        } 
    } 
}

0

En plus de k0pernicus, je voudrais suggérer le local le mieux servi . Il s'agit également d'un script bash (v4) permettant aux opérateurs de serveurs Web de télécharger et de servir 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 à jour.


0

Il existe un script très simple, écrit en simple Java, pour télécharger toutes les polices à partir d'un lien Google Web Font (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 le seul 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 construction de type webpack vue-webpack).


0

Vous pouvez télécharger les polices sources depuis https://github.com/google/fonts

Après cela, utilisez l' font-rangeroutil pour diviser votre grande police Unicode en plusieurs sous-ensembles (par exemple latin, cyrillique). Vous devez effectuer les opérations suivantes avec l'outil:

  • Générez des sous-ensembles pour chaque langue prise en charge
  • Utiliser un sous-ensemble de plage unicode pour économiser la bande passante
  • Supprimez les ballonnements de vos polices et optimisez-les pour le Web
  • Convertissez vos polices au format woff2 compressé
  • Fournir un remplacement .woff pour les anciens navigateurs
  • Personnaliser le chargement et le rendu des polices
  • Générer un fichier CSS avec des règles @ font-face
  • Auto-hébergez les polices Web ou utilisez-les localement

Font-Ranger : https://www.npmjs.com/package/font-ranger

PS Vous pouvez également automatiser cela à l'aide de l'API Node.js

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.