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

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é.

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:

• Neverpanic / google-font-download
• google-webfont-helper
• police locale

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

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

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 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

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.

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.

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

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" />

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.

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.

Ma solution consistait à télécharger les fichiers TTF à partir des polices Web Google, puis à utiliser onlinefontconverter.com .

J'ai fait un petit script PHP pour obtenir des liens de téléchargement à partir d'une URL d'importation CSS Google Fonts comme: https://fonts.googleapis.com/css?family=Roboto:400,700|Slabo+27px|Lato:400,300italic,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:

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'

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>";
        } 
    } 
}

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.

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).

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