Como hospedar fontes da web do google no meu próprio servidor?

Preciso usar algumas fontes do google em um aplicativo de intranet. Os clientes podem ou não ter conexão com a internet. Lendo os termos da licença, parece que é legalmente permitido.

Lembre-se de que minha resposta envelheceu muito.

Existem outras respostas tecnicamente mais sofisticadas abaixo, por exemplo:

• neverpanic / google-font-download
• google-webfont-helper
• localfont

portanto, não deixe que o fato de que essa seja a resposta atualmente aceita dê a impressão de que essa ainda é a melhor.

Agora você também pode fazer o download de todo o conjunto de fontes do google via github no repositório google / font . Eles também fornecem um instantâneo com zip de ~ 420 MB de suas fontes .

Você primeiro baixa sua seleção de fonte como um pacote compactado, fornecendo várias fontes de tipo verdadeiro. Copie-os em algum lugar público, em algum lugar ao qual você possa vincular a partir do seu css.

Na página de download do google webfont, você encontrará um link de inclusão da seguinte forma:

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

Ele é vinculado a um CSS que define as fontes por meio de @font-facevárias definições.

Abra-o em um navegador para copiá-los e colá-los em seu próprio CSS e modificar os URLs para incluir o arquivo de fonte e os tipos de formato corretos.

Então, é isso:

@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');
}

torna-se o seguinte:

/* 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');
}

Como você pode ver, a desvantagem de hospedar as fontes em seu próprio sistema é que você se restringe ao formato de tipo real, enquanto o serviço google webfont determina pelo dispositivo de acesso quais formatos serão transmitidos.

Além disso, eu tive que adicionar um .htaccessarquivo ao meu diretório, contendo as fontes que continham tipos MIME, para evitar erros de aparecer nas Ferramentas de Desenvolvimento do Chrome.

Para esta solução, apenas o tipo verdadeiro é necessário, mas definir mais não prejudica quando você deseja incluir fontes diferentes também font-awesome.

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

Existe uma ferramenta localfont.com para ajudá-lo a baixar todas as variantes de fonte. Também gera o CSS correspondente para implementação. descontinuada

localfont está inoperante. Em vez disso, como Damir sugere , você pode usar o google-webfonts-helper

Ótima solução é o google-webfonts-helper .

Permite selecionar mais de uma variante de fonte, o que economiza muito tempo.

Escrevi um script bash que busca o arquivo CSS nos servidores do Google com diferentes agentes de usuário, baixa os diferentes formatos de fonte em um diretório local e grava um arquivo CSS incluindo eles. Observe que o script precisa do Bash versão 4.x.

Consulte https://neverpanic.de/blog/2014/03/19/downloading-google-web-fonts-for-local-hosting/ para obter o script (não o estou reproduzindo aqui, por isso só preciso atualizá-lo em um lugar quando eu preciso).

Editar: movido para https://github.com/neverpanic/google-font-download

O conteúdo do arquivo CSS (a partir da URL de inclusão) depende de qual navegador eu o vejo. Por exemplo, ao navegar para http://fonts.googleapis.com/css?family=Open+Sans usando o Chrome, o arquivo continha apenas links WOFF. Usando o Internet Explorer (abaixo), ele incluiu EOT e WOFF. Colei todos os links no meu navegador para baixá-los.

@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');
}

Quando você hospeda suas próprias fontes da web, precisa vincular corretamente cada tipo de fonte , lidar com os erros herdados do navegador etc. Quando você usa o Google Web Fonts (hospedado pelo Google), o Google vincula automaticamente os tipos de fonte corretos para esse navegador.

É legalmente permitido desde que você cumpra os termos da licença da fonte - geralmente o OFL.

Você precisará de um conjunto de formatos de fonte da Web, e o Font Squirrel Webfont Generator pode produzi-los.

Mas o OFL exigia que as fontes fossem renomeadas se elas fossem modificadas, e usar o gerador significa modificá-las.

Eu tenho um script escrito em PHP semelhante ao do @neverpanic que baixa automaticamente o CSS e as fontes ( com ou sem sugestões ) do Google. Ele serve o CSS e as fontes corretos do seu próprio servidor, com base no User Agent. Ele mantém seu próprio cache, para que as fontes e o CSS de um User Agent sejam baixados apenas uma vez.

Está em um estágio prematuro, mas pode ser encontrado aqui: DaAwesomeP / php-offline-fonts

Como você deseja hospedar todas as fontes (ou algumas delas) em seu próprio servidor, faça o download das fontes deste repositório e use-as da maneira que desejar: https://github.com/praisedpk/Local-Google-Fonts

Se você quiser fazer isso apenas para corrigir o problema de cache do navegador de alavancagem que vem com o Google Fonts, use CDN de fontes alternativas e inclua fontes como:

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

Ou uma fonte específica, como:

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

Eu usei grun-local-googlefont em uma tarefa difícil .

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');
 };

Então, para recuperá-los:

grunt local-googlefont:opensans

Observe que estou usando uma bifurcação do original, que funciona melhor ao recuperar fontes com espaços em branco em seus nomes.

Na verdade, você pode baixar todas as variantes de formato de fonte diretamente do Google e incluí-las no seu css para veicular no seu servidor. Dessa forma, você não precisa se preocupar com o rastreamento do Google pelos usuários do seu site. No entanto, a desvantagem pode estar diminuindo sua velocidade de veiculação. As fontes são bastante exigentes em recursos. Ainda não realizei nenhum teste nesta edição e me pergunto se alguém tem pensamentos semelhantes.

Minha solução foi baixar os arquivos TTF das fontes do Google Web e usar o onlinefontconverter.com .

Criei um pequeno script PHP para obter links de download de um URL de importação CSS do Google Fonts, como: https://fonts.googleapis.com/css?family=Roboto:400,700|Slabo+27px|Lato:400,300italic,900italic

Você pode usar esta ferramenta aqui: http://nikoskip.me/gfonts.php

Por exemplo, se você usar o URL de importação acima, obterá o seguinte:

Se você estiver usando o Webpack, poderá estar interessado neste projeto: https://github.com/KyleAMathews/typefaces

Por exemplo, digamos que você queira usar a fonte Roboto:

npm install typeface-roboto --save

Em seguida, importe-o no ponto de entrada do seu aplicativo (arquivo js principal):

import 'typeface-roboto'

Você pode seguir o script desenvolvido usando PHP. Onde você pode baixar qualquer fonte do google usando o script. Ele fará o download das fontes e criará um arquivo CSS e um archive para compactar.
Você pode baixar o código-fonte no https://github.com/sourav101/google-fonts-downloader do GitHub

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

Além do k0pernicus, eu gostaria de sugerir o local mais bem servido . Também é um script bash (v4) para permitir que os operadores de servidor da web baixem e sirvam as fontes da web do Google a partir de seu próprio servidor da web. Mas, além do outro script bash, ele permite que o usuário automatize totalmente (via cron e outros) a veiculação de arquivos de fonte e arquivos css atualizados.

Há um script muito simples, escrito em Java comum, para baixar todas as fontes de um link do Google Web Font (várias fontes suportadas). Ele também baixa o arquivo CSS e o adapta aos arquivos locais. O agente do usuário pode ser adaptado para obter também outros arquivos além do WOFF2. Consulte https://github.com/ssc-hrep3/google-font-download

Os arquivos resultantes podem ser facilmente adicionados a um processo de compilação (por exemplo, uma compilação do webpack como vue-webpack).

Você pode baixar fontes de origem em https://github.com/google/fonts

Depois disso, use a font-rangerferramenta para dividir sua fonte Unicode grande em vários subconjuntos (por exemplo, latim, cirílico). Você deve fazer o seguinte com a ferramenta:

• Gere subconjuntos para cada idioma suportado
• Use subconjuntos de alcance unicode para economizar largura de banda
• Remova o inchaço das fontes e otimize-as para a web
• Converta suas fontes em um formato woff2 compactado
• Fornecer fallback .woff para navegadores mais antigos
• Personalizar o carregamento e a renderização da fonte
• Gere arquivo CSS com regras @ font-face
• Hospede fontes da Web auto-hospedadas ou use-as localmente

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

PS Você também pode automatizar isso usando a API do Node.js.