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

271

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.

Samarth Bhargava
fonte
6
O que eu entendo é que não é tão simples quanto baixar um arquivo e salvá-lo. Cada navegador suporta um formato de fonte diferente e o Google não fornece uma maneira direta e fácil de obter todos os arquivos necessários para que a fonte funcione corretamente em todos os navegadores.
Samarth Bhargava
1
Você obtém todos os URIs da folha de estilo vinculada.
Fuxia
38
Sim, eu posso descobrir todos os detalhes me, ou eu posso fazer uma pergunta para ver se alguém fez isso antes e tem experiências e scripts para share
Samarth Bhargava
2
Bem, o Google retorna respostas diferentes, fonts.googleapis.com/css?dependendo dos cabeçalhos do UA (leia-se: seu navegador) ➝ Portanto, eles fornecem apenas o que o navegador atual precisa. Se alguém quiser obter todas as fontes necessárias (ou mesmo apenas os URLs), você precisará de várias cargas do arquivo css de diferentes navegadores. com diferentes cabeçalhos forjados, para obter tudo o que é necessário.
precisa saber é o seguinte
Use esta ferramenta: npmjs.com/package/font-ranger
Do Async

Respostas:

217

Lembre-se de que minha resposta envelheceu muito.

Existem outras respostas tecnicamente mais sofisticadas abaixo, por exemplo:

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
k0pernikus
fonte
37
Você não está restrito ao TrueType, apenas precisa baixar os arquivos .woff, ou seja. coloque 'http: //themes.googleusercontent.com/static/fonts/cantarell/v3/...80lGh-uXM.woff' em seu navegador da web, salve-o como '/fonts/Cantarell-Bold.woff' e atualize o css para combinar (url ('/ fonts / Canterell-Bold.woff'))
Anthony Briggs
2
Há uma razão pela qual o Google fornece vários formatos de fonte - o TrueType não funciona em navegadores antigos . WOFF é o padrão W3C.
Michael McGinnis
3
Role para baixo até a solução de script bash - incrível!
Dr. Max Völkel
3
O arquivo altera o conteúdo, dependendo do navegador que está sendo usado.
Krii 28/04
3
Essa resposta é mais complexa de implantar do que as alternativas listadas abaixo; também é tecnicamente incorreto em vários aspectos (nenhuma limitação ao TTF, TTF é uma má idéia, isso produzirá resultados diferentes por navegador, você não pode hospedar fontes em nenhum lugar público, pois a mesma origem se aplica). Por favor, não faça isso, use uma das outras respostas abaixo.
Robin Berjon
202

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


udondan
fonte
Embora fantástica, quando acontecer de você precisar de outras versões linguísticas da sua fonte, você tem que encontrar uma outra solução
anges244
E os diferentes conjuntos de caracteres?
vitro
1
Aqui, o desenvolvedor do Google diz que fontes hospedadas pelo Google têm suas próprias desvantagens . Em vez disso, verifique essas dicas para usar a CDN da fonte do Google e aumentar a velocidade da página.
shaijut
@PauloCoghi A ferramenta pode relatar que o site é acessível, mas claramente há algo errado, já que eu e muitos outros não conseguimos visualizá-lo.
precisa saber é o seguinte
147

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

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

Damir Bulic
fonte
Ótimas ferramentas! Eu amo isso. Você pode ver a visualização da fonte e baixar todos os arquivos necessários com um clique.
precisa saber é o seguinte
Ferramenta muito boa. Funciona muito bem e permite baixar latin-extfontes também.
Piotrekkr 7/03/16
3
Essa é a melhor opção. Ele faz tudo, você pode até especificar o prefixo da pasta da fonte.
Maciej Krawczyk
63

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

nunca latino
fonte
4
Isso é mais do que incrível! (Espero que funcione bem, ainda não testei). Eu procurei algo como este formulário periodicamente ao longo dos anos. Sem brincadeira, eu até comecei a escrever meu próprio roteiro que está longe de estar completo. É espantoso que tão poucas pessoas tendem a querer isso. O Google está ocultando essas fontes por trás das seqüências de caracteres geradas e não fornece código-fonte aberto os arquivos realmente webfont no repositório apenas o ttf. Eles querem que usemos suas fontes, eles querem que usemos seus servidores porque abusam disso para rastrear pessoas. E mesmo as pessoas mais conscientes da privacidade incorporam as fontes do servidor googles.
Redanimalwar 17/02/2015
1
Minha única preocupação é as licenças de fontes reais, não as estudamos de perto. Tudo o que sei é que as licenças de fonte diferem da GPL ou MIT. Então, temos permissão legal para pegar essas fontes nos servidores do Google e servi-las por conta própria? Novamente, eu não acredito nem por um minuto que o Google esteja dando todas essas fontes apenas para melhorar o mundo, eles realmente pagam desenvolvedores para produzir fontes abertas para eles, para que, com certeza, ganhem algo, muitos dados. E se a privacidade não for sua, você pode testar essas fontes localmente sem a Internet dessa maneira.
Redanimalwar 17/02/2015
2
Essa resposta deve ser mais votada, porque esse script pode baixar todos os formatos e subconjuntos de fontes, em contraste com o localfont.com.
Piotrekkr
Eu sei que você vai me levar como uma pessoa preguiçosa, mas como um usuário médio janelas, ela suga ter que compilá-lo e etc para ser capaz de usá-lo ...
Lucas Bustamante
@LucasB Não há compilação envolvida. É um script bash. Sei que o Windows não vem com o Bash, mas sinta-se à vontade para reimplementar isso de uma maneira que ofereça suporte ao Windows. Isso simplesmente não fazia parte do meu caso de uso, então não gastei tempo com isso.
neverpanic
14

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.

Michael McGinnis
fonte
1
+1 para vincular ao artigo que explica o código CSS "universal" a ser usado e um código "reduzido" para navegadores modernos!
amigos estão dizendo sobre italia
2
Então, precisarei servir o navegador de forma inteligente com um formato diferente. Sei que isso é altamente desencorajado, mas estamos servindo nossa página para alguns clientes da China e é a principal razão pela qual queremos hospedá-la. Eles bloquearam a maioria dos recursos do Google.
Lionel Chan
6

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

davelab6
fonte
Ou, dependendo do tipo de letra, você pode simplesmente obter o kit Webfont diretamente do esquilo da fonte. fontsquirrel.com/fonts/open-sans
Jack Frost
3

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

DaAwesomeP
fonte
2

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" />
Hamid Sarfraz
fonte
1

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.

Hank
fonte
1

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.

Flyhead
fonte
1

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'
justin
fonte
1

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>";
        } 
    } 
}
Sourav
fonte
0

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.

Ronald van Engelen
fonte
0

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

ssc-hrep3
fonte
0

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.

Do Async
fonte