¿Cómo alojar fuentes web de Google en mi propio servidor?


271

Necesito usar algunas fuentes de google en una aplicación de intranet. Los clientes pueden o no tener conexión a internet. Al leer los términos de la licencia, parece que está legalmente permitido.


66
Lo que entiendo es que no es tan simple como descargar un archivo y guardarlo. Cada navegador admite un formato de fuente diferente y google no proporciona una forma directa y fácil de obtener todos los archivos necesarios para que la fuente funcione correctamente en todos los navegadores.
Samarth Bhargava

1
Obtiene todos los URI de la hoja de estilo vinculada.
fuxia

38
Sí, me puedo imaginar todos los detalles a mí mismo, o puedo hacer una pregunta para ver si alguien ha hecho antes y tiene experiencias y secuencias de comandos para la participación
Samarth Bhargava

2
Bueno, Google devuelve diferentes respuestas en fonts.googleapis.com/css?función de sus encabezados UA (léase: su navegador) ➝ Por lo tanto, solo entregan lo que necesita el navegador actual. Si desea obtener todas las fuentes necesarias (o incluso solo las URL), necesitará varias cargas del archivo css de diferentes navegadores o resp. con diferentes encabezados forjados, para obtener todo lo que se necesita.
Frank Nocke

Utilice esta herramienta: npmjs.com/package/font-ranger
Async

Respuestas:


218

Tenga en cuenta que mi respuesta ha envejecido mucho.

Hay otras respuestas más sofisticadas técnicamente a continuación, por ejemplo:

así que no dejes que el hecho de que esta sea la respuesta aceptada actualmente te dé la impresión de que sigue siendo la mejor.


Ahora también puede descargar todo el conjunto de fuentes de google a través de github en su repositorio de google / font . También proporcionan una instantánea zip ~ 420MB de sus fuentes .


Primero descarga su selección de fuente como un paquete comprimido, que le proporciona un montón de fuentes de tipo verdadero. Cópielos en algún lugar público, en algún lugar al que pueda vincular desde su CSS.

En la página de descarga de google webfont, encontrará un enlace de inclusión como este:

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

Se vincula a un CSS que define las fuentes a través de un montón de @font-facedefiniciones.

Ábralo en un navegador para copiarlos y pegarlos en su propio CSS y modifique las URL para incluir el archivo de fuente y los tipos de formato correctos.

Así que esto:

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

se convierte en esto:

/* 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 puede ver, una desventaja de alojar las fuentes en su propio sistema de esta manera es que se restringe al formato de tipo verdadero, mientras que el servicio google webfont determina por el dispositivo de acceso qué formatos se transmitirán.

Además, tuve que agregar un .htaccessarchivo a mi directorio que contenía las fuentes que contenían tipos MIME para evitar que aparecieran errores en Chrome Dev Tools.

Para esta solución, solo se necesita el tipo verdadero, pero definir más no hace daño cuando también desea incluir diferentes fuentes, como font-awesome.

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

37
No está restringido a TrueType, solo necesita descargar los archivos .woff también, es decir. ponga 'http: //themes.googleusercontent.com/static/fonts/cantarell/v3/...80lGh-uXM.woff' en su navegador web, guárdelo como '/fonts/Cantarell-Bold.woff' y actualice el css to match (url ('/ fonts / Canterell-Bold.woff'))
Anthony Briggs

2
Hay una razón por la cual Google proporciona varios formatos de fuente: TrueType no funciona en navegadores antiguos . WOFF es el estándar W3C.
Michael McGinnis

3
Desplácese hacia abajo hasta la solución de script bash: ¡increíble!
Dr. Max Völkel

3
El archivo cambia el contenido según el navegador que se utilice.
Krii

3
Esta respuesta es más compleja de implementar que las alternativas enumeradas a continuación; También es técnicamente incorrecto en varios aspectos (sin limitación de TTF, TTF es una mala idea, esto producirá resultados diferentes por navegador, no puede alojar fuentes en ningún lugar público ya que se aplica el mismo origen). No hagas eso, usa una de las otras respuestas a continuación.
Robin Berjon

202

Hay una herramienta localfont.com para ayudarlo a descargar todas las variantes de fuente. También genera el CSS correspondiente para la implementación. obsoleto

localfont está caído. En cambio, como sugiere Damir , puede usar google-webfonts-helper



Aunque es fantástico, cuando necesite versiones de su fuente en otro idioma, debe encontrar otra solución
anges244

¿Qué pasa con los diferentes conjuntos de caracteres?
vitro

1
Aquí el desarrollador de Google dice que el autohospedaje de las fuentes de Google tiene sus propias desventajas , en su lugar, consulte estos consejos para usar la fuente de Google CDN y aumentar la velocidad de la página.
shaijut

@PauloCoghi La herramienta puede informar que se puede acceder al sitio web, pero claramente hay algo mal ya que yo y muchos otros no podemos verlo.
Lawyerson

148

La gran solución es google-webfonts-helper .

Le permite seleccionar más de una variante de fuente, lo que ahorra mucho tiempo.


Grandes herramientas! Me encanta. Puede ver la vista previa de la fuente y descargar todos los archivos necesarios con un solo clic.
Cuixiping

Muy buena herramienta. Funciona muy bien y permite descargar latin-extfuentes también.
piotrekkr

3
Esta es la mejor opcion. Hace todo, incluso puede especificar el prefijo de la carpeta de fuentes.
Maciej Krawczyk

63

Escribí un script bash que recupera el archivo CSS en los servidores de Google con diferentes agentes de usuario, descarga los diferentes formatos de fuente a un directorio local y escribe un archivo CSS que los incluye. Tenga en cuenta que el script necesita Bash versión 4.x.

Consulte https://neverpanic.de/blog/2014/03/19/downloading-google-web-fonts-for-local-hosting/ para ver el script (no lo estoy reproduciendo aquí, así que solo tengo que actualizarlo en un lugar cuando lo necesito).

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


44
¡Esto es más que increíble! (Espero que funcione bien aún no probado). Busqué algo así de vez en cuando durante años. No es broma, incluso comencé a escribir mi propio guión que está lejos de estar completo. Es sorprendente que tan pocas personas tienden a querer esto. Google está ocultando estas fuentes detrás de las cadenas generadas y no abre el código fuente de los archivos de fuente web en realidad en el repositorio, solo el ttf. Quieren que usemos sus fuentes, quieren que usemos sus servidores porque abusan de esto para rastrear personas. E incluso las personas más conscientes de la privacidad incorporan las fuentes del servidor de Google.
redanimalwar

1
Mi única preocupación son las licencias de fuentes reales, no las estudié de cerca. Todo lo que sé es que las licencias de fuentes difieren de GPL o MIT. Entonces, ¿estamos legalmente autorizados a capturar estas fuentes de los servidores de Google y servirlas por nuestra cuenta? Una vez más, no creo por un minuto que Google esté regalando todas estas fuentes solo por mejorar el mundo, en realidad les pagan a los desarrolladores para que produzcan fuentes abiertas para ellos, por lo que seguramente han ganado algo, muchos datos. Y si no se trata de privacidad, puede probar estas fuentes localmente sin Internet de esta manera.
redanimalwar

2
Esta respuesta debería ser más votada, porque este script puede descargar todos los formatos de fuentes y subconjuntos en contraste con localfont.com.
piotrekkr

Sé que me tomará como una persona perezosa, pero como un usuario promedio de Windows, apesta tener que compilarlo, etc. para poder usarlo ...
Lucas Bustamante

@LucasB No hay compilación involucrada. Es un script bash. Sé que Windows no viene con Bash, pero siéntase libre de volver a implementar esto de una manera que sea compatible con Windows. Simplemente no era parte de mi caso de uso, por lo que no pasé ningún tiempo en ello.
neverpanic

14

El contenido del archivo CSS (de la URL de inclusión) depende del navegador desde el que lo veo. Por ejemplo, al navegar a http://fonts.googleapis.com/css?family=Open+Sans usando Chrome, el archivo solo contenía enlaces WOFF. Usando Internet Explorer (abajo), incluyó EOT y WOFF. Pegué todos los enlaces en mi navegador para descargarlos.

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

Cuando aloja sus propias fuentes web, debe vincular correctamente a cada tipo de fuente , tratar los errores del navegador heredados, etc. Cuando utiliza las fuentes web de Google (alojadas por Google), Google se vincula automáticamente a los tipos de fuente correctos para ese navegador.


1
¡+1 por vincular a ese artículo que explica el código CSS "universal" a usar y uno "reducido" para los navegadores modernos!
ItalyPaleAle

2
Por lo tanto, tendré que servir el navegador de forma inteligente con un formato diferente. Sé que esto está muy desaconsejado, pero estamos sirviendo nuestra página a algunos clientes de China y es la razón principal por la que queremos alojarla. Bloquearon la mayoría de los recursos de google.
Lionel Chan

6

Está legalmente permitido siempre que cumpla con los términos de la licencia de la fuente, generalmente la OFL.

Necesitará un conjunto de formatos de fuente web, y Font Squirrel Webfont Generator puede producirlos.

Pero la OFL requería cambiar el nombre de las fuentes si se modificaban, y usar el generador significa modificarlas.


O, dependiendo del tipo de letra, simplemente puede obtener el kit de Webfont directamente de la fuente ardilla. fontsquirrel.com/fonts/open-sans
Jack Frost

3

Tengo un script escrito en PHP similar al de @neverpanic que descarga automáticamente tanto el CSS como las fuentes ( tanto insinuadas como no insinuadas ) de Google. Luego sirve el CSS correcto y las fuentes de su propio servidor basado en el Agente de usuario. Mantiene su propio caché, por lo que las fuentes y CSS de un agente de usuario solo se descargarán una vez.

Está en una etapa prematura, pero se puede encontrar aquí: DaAwesomeP / php-offline-fonts


2

Como desea alojar todas las fuentes (o algunas de ellas) en su propio servidor, descargue las fuentes de este repositorio y úselas de la manera que desee: https://github.com/praisedpk/Local-Google-Fonts

Si solo desea hacer esto para solucionar el problema de almacenamiento en caché del navegador que viene con Google Fonts, puede usar fuentes alternativas CDN e incluir fuentes como:

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

O una fuente específica, como:

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

1

Solía ronco-local-googlefont en una tarea ronco.

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

Luego, para recuperarlos:

grunt local-googlefont:opensans

Tenga en cuenta que estoy usando una bifurcación del original, que funciona mejor al recuperar fuentes con espacios en blanco en sus nombres.


1

En realidad, puede descargar todas las variantes de formato de fuente directamente desde Google e incluirlas en su CSS para servir desde su servidor. De esa manera, no tiene que preocuparse de que Google rastree a los usuarios de su sitio. Sin embargo, la desventaja puede ralentizar su propia velocidad de servicio. Las fuentes son bastante exigentes en recursos. Todavía no he hecho ninguna prueba en este tema, y ​​me pregunto si alguien tiene pensamientos similares.




1

Si está utilizando Webpack, podría estar interesado en este proyecto: https://github.com/KyleAMathews/typefaces

Por ejemplo, di que quieres usar la fuente Roboto:

npm install typeface-roboto --save

Luego simplemente impórtelo en el punto de entrada de su aplicación (archivo js principal):

import 'typeface-roboto'

1

Puede seguir el script desarrollado con PHP. Donde puede descargar cualquier fuente de Google utilizando el script. Descargará las fuentes y creará un archivo CSS y archivará en zip.
Puede descargar el código fuente desde 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

Además de k0pernicus, me gustaría sugerir el local mejor servido . También es un script bash (v4) para permitir que los operadores de servidores web descarguen y sirvan las fuentes web de Google desde su propio servidor web. Pero además del otro script bash, permite al usuario automatizar completamente (a través de cron y tal) el servicio de archivos de fuente actualizados y archivos css.


0

Hay una secuencia de comandos muy simple, escrita en Java simple, para descargar todas las fuentes desde un enlace de fuente web de Google (se admiten varias fuentes). También descarga el archivo CSS y lo adapta a los archivos locales. El agente de usuario se puede adaptar para obtener también otros archivos además de WOFF2. Ver https://github.com/ssc-hrep3/google-font-download

Los archivos resultantes se pueden agregar fácilmente a un proceso de compilación (por ejemplo, una compilación de paquete web vue-webpack).


0

Puede descargar fuentes de origen desde https://github.com/google/fonts

Después de eso, use la font-rangerherramienta para dividir su fuente Unicode grande en múltiples subconjuntos (por ejemplo, latín, cirílico). Debe hacer lo siguiente con la herramienta:

  • Genere subconjuntos para cada idioma que admita
  • Utilice el subconjunto de rango unicode para ahorrar ancho de banda
  • Elimine la hinchazón de sus fuentes y optimícelas para la web
  • Convierta sus fuentes a un formato comprimido woff2
  • Proporcionar respaldo de .woff para navegadores antiguos
  • Personaliza la carga y el renderizado de fuentes
  • Generar archivo CSS con reglas @ font-face
  • Fuentes web autohospedadas o úselas localmente

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

PD: También puede automatizar esto usando la API Node.js

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.