如何在我自己的服务器上托管谷歌网络字体？答案

【问题标题】：How to host google web fonts on my own server?如何在我自己的服务器上托管谷歌网络字体？
【发布时间】：2012-02-16 12:19:42
【问题描述】：

我需要在 Intranet 应用程序上使用一些 google 字体。客户端可能有也可能没有互联网连接。阅读许可条款，它似乎是合法的。

【问题讨论】：

我的理解是，它不像下载一个文件并保存它那么简单。每个浏览器都支持不同的字体格式，谷歌没有提供一种直接、简单的方法来获取所有必要的文件，以便字体在所有浏览器中都能正常工作。
您从链接的样式表中获取所有 URI。
是的，我可以自己弄清楚所有细节，或者我可以问一个问题，看看是否有人以前做过并有经验和脚本可以分享
好吧，根据您的 UA 标头（阅读：您的浏览器），google 在 fonts.googleapis.com/css? 中返回不同的答案➝ 所以他们只提供当前浏览器需要的内容。如果想要获得所需的所有字体（甚至只是 url），您将需要从不同的浏览器分别加载多个 css 文件。使用不同的伪造标题，以获得所需的一切。
使用这个工具：npmjs.com/package/font-ranger

标签： fonts google-font-api

【解决方案1】：

只要您遵守字体许可的条款（通常是 OFL），这是合法的。

您需要一组网络字体格式，Font Squirrel Webfont Generator 可以生成这些格式。

但 OFL 要求字体在被修改后重命名，使用生成器意味着修改它们。

【讨论】：

或者，根据字体的不同，您可以直接从字体松鼠那里获得 Webfont 套件。 fontsquirrel.com/fonts/open-sans

【解决方案2】：

请记住，我的回答已经过时了。

下面还有其他技术上更复杂的答案，例如：

所以不要让这是当前公认的答案这一事实给您留下这样的印象，即这仍然是最好的答案。

您现在还可以通过 github 上的 google/font 存储库下载 google 的整个字体集。他们还提供~420MB zip snapshot of their fonts。

您首先将您的字体选择下载为一个压缩包，为您提供一堆真实类型的字体。将它们复制到公共的地方，你可以从你的 CSS 链接到的地方。

在 google webfont 下载页面上，您会找到一个包含链接，如下所示：

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

它通过一堆 @font-face 定义链接到定义字体的 CSS。

在浏览器中打开它，将它们复制并粘贴到您自己的 CSS 中，并修改 url 以包含正确的字体文件和格式类型。

所以这个：

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

变成这样：

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

如您所见，以这种方式在您自己的系统上托管字体的一个缺点是，您将自己限制为真正的类型格式，而 google webfont 服务由访问设备决定将传输哪些格式。

此外，我必须将 .htaccess 文件添加到包含 mime 类型的字体的目录中，以避免在 Chrome 开发工具中弹出错误。

对于这个解决方案，只需要真正的类型，但当您还想包含不同的字体时，定义更多也没有什么坏处，比如font-awesome。

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

【讨论】：

你不限于 TrueType，你只需要下载 .woff 文件，即。将“http://themes.googleusercontent.com/static/fonts/cantarell/v3/...80lGh-uXM.woff”放入您的网络浏览器，将其保存为“/fonts/Cantarell-Bold.woff”并更新匹配的css (url('/fonts/Canterell-Bold.woff'))
Google 提供多种字体格式是有原因的 - TrueType doesn't work on old browsers。 WOFF 是 W3C 标准。
向下滚动到 bash 脚本解决方案 - 太棒了！
文件根据使用的浏览器改变内容。
此响应比下面列出的替代方案部署起来更复杂；它在几个方面在技术上也是不正确的（不限于 TTF，TTF 是个坏主意，这将在每个浏览器中产生不同的结果，由于同源适用，您不能在任何公共地方托管字体）。请不要这样做，请使用以下其他答案之一。

【解决方案3】：

CSS 文件的内容（来自包含 URL）取决于我从哪个浏览器查看它。例如，当使用 Chrome 浏览到 http://fonts.googleapis.com/css?family=Open+Sans 时，该文件仅包含 WOFF 链接。使用 Internet Explorer（下图），它包括 EOT 和 WOFF。我将所有链接粘贴到浏览器中进行下载。

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

当您托管自己的网络字体时，您需要correctly link to each font type，处理遗留浏览器错误等。当您使用 Google 网络字体（由 Google 托管）时，Google 会自动链接到该浏览器的正确字体类型。

【讨论】：

+1 用于链接到该文章，该文章解释了要使用的“通用”CSS 代码和现代浏览器的“简化”代码！
所以我需要巧妙地为浏览器提供不同的格式。我知道这是非常不鼓励的，但我们正在为一些中国客户提供我们的页面，这是我们想要托管它的主要原因。他们屏蔽了大部分谷歌资源。

【解决方案4】：

我写了一个bash script，它使用不同的用户代理在 Google 的服务器上获取 CSS 文件，将不同的字体格式下载到本地目录并写入一个包含它们的 CSS 文件。请注意，该脚本需要 Bash 版本 4.x。

请参阅https://neverpanic.de/blog/2014/03/19/downloading-google-web-fonts-for-local-hosting/ 获取脚本（我不会在这里复制它，所以我只需要在需要时在一个地方更新它）。

编辑：移至https://github.com/neverpanic/google-font-download

【讨论】：

这真是太棒了！（我希望它运行良好，尚未测试）。多年来，我不时地搜索类似这种形式的东西。不开玩笑，我什至开始编写自己的脚本，但还远未完成。令人震惊的是，很少有人想要这个。谷歌将这些字体隐藏在生成的字符串后面，并且没有开源 repo 中的实际 webfont 文件，只有 ttf。他们希望我们使用他们的字体，他们希望我们使用他们的服务器，因为他们滥用它来跟踪人们。即使是最注重隐私的人也会从谷歌服务器嵌入字体。
我唯一关心的是实际的字体许可证，并没有真正仔细研究它们。我所知道的是字体许可证与 GPL 或 MIT 不同。那么，我们是否真的可以合法地从 Google 服务器捕获这些字体并自行提供服务？我再一次不相信谷歌只是为了让世界变得更美好而放弃所有这些字体，他们实际上付钱给开发人员为他们制作开放字体，所以他们肯定会获得一些东西，数据大量的数据。如果它不是您的隐私，您可以通过这种方式在本地测试此字体而无需互联网。
这个答案应该得到更多的支持，因为这个脚本可以下载所有字体格式和子集，而不是 localfont.com。
我知道你会把我当作一个懒惰的人，但作为一个普通的 Windows 用户，必须编译它等等才能使用它……
@LucasB 不涉及编译。这是一个 bash 脚本。我知道 Windows 不附带 Bash，但请随时以支持 Windows 的方式重新实现它。它只是不是我用例的一部分，所以我没有花任何时间。

【解决方案5】：

我有一个用 PHP 编写的脚本，类似于 @neverpanic 的脚本，它会自动从 Google 下载 CSS 和字体（提示和未提示）。然后它根据用户代理从您自己的服务器提供正确的 CSS 和字体。它保留自己的缓存，因此用户代理的字体和 CSS 只会下载一次。

它处于早期阶段，但可以在这里找到：DaAwesomeP / php-offline-fonts

【讨论】：

【解决方案6】：

~~有一个工具localfont.com 可以帮助您下载所有字体变体。它还会生成相应的 CSS 以供实施。~~ 已弃用

localfont 已关闭。相反，作为Damir suggests，您可以使用google-webfonts-helper

【讨论】：

虽然很棒，但当您碰巧需要其他语言版本的字体时，您必须找到其他解决方案
不同的字符集呢？
Here google 开发者说自托管 Google 字体有其自身的缺点，改为查看这些 tips 以使用 google 字体 CDN 并提高页面速度。
@PauloCoghi 该工具可能会报告该网站是可访问的，但显然有问题，因为我和许多其他人无法查看它。

【解决方案7】：

很好的解决方案是google-webfonts-helper 。

它允许您选择多个字体变体，从而节省大量时间。

【讨论】：

很棒的工具！我喜欢它。您可以一键查看字体预览并下载所有需要的文件。
非常好的工具。效果很好，也允许下载latin-ext 字体。
这是最好的选择。它什么都做，你甚至可以指定字体文件夹前缀。
这让我摆脱了很多问题，我在 golang 中使用 chromedp 生成 pdf，由于有时远程字体调用，设计被破坏了。将所有字体移到本地服务器后，所有问题都已解决。很好的解决方案。

【解决方案8】：

我在一项繁重的任务中使用了grunt-local-googlefont。

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

然后，检索它们：

grunt local-googlefont:opensans

注意，我使用的是原版的 fork，它在检索名称中带有空格的字体时效果更好。

【讨论】：

【解决方案9】：

您实际上可以直接从 Google 下载所有字体格式变体，并将它们包含在您的 css 中以从您的服务器提供服务。这样您就不必担心 Google 会跟踪您网站的用户。但是，不利的一面可能会减慢您自己的服务速度。字体对资源要求很高。这个问题我还没有做任何测试，不知道有没有人有类似的想法。

【讨论】：

【解决方案10】：

我的解决方案是从 google web fonts 下载 TTF 文件，然后使用onlinefontconverter.com。

【讨论】：

【解决方案11】：

除了k0pernicus，我想推荐best-served-local。它也是一个 bash (v4) 脚本，使网络服务器操作员能够从他们自己的网络服务器下载和提供 Google 网络字体。但除了其他 bash 脚本之外，它还允许用户完全自动化（通过 cron 等）提供最新的字体文件和 css 文件。

【讨论】：

推荐工具时请说明所属关系

【解决方案12】：

我制作了一个小型 PHP 脚本来从 Google 字体 CSS 导入 URL 获取下载链接，例如：https://fonts.googleapis.com/css?family=Roboto:400,700|Slabo+27px|Lato:400,300italic,900italic

您可以在此处使用此工具：http://nikoskip.me/gfonts.php

例如，如果你使用上面的导入 URL，你会得到这个：

【讨论】：

【解决方案13】：

由于您想在自己的服务器上托管所有字体（或其中一些），您可以从这个 repo 下载字体并以您想要的方式使用它：https://github.com/praisedpk/Local-Google-Fonts

如果您只想这样做来解决 Google 字体附带的杠杆浏览器缓存问题，您可以使用替代 fonts CDN，并将字体包括为：

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

或者特定的字体，如：

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

【讨论】：

【解决方案14】：

有一个非常简单的脚本，用纯 Java 编写，可以从 Google Web Font 链接下载所有字体（支持多种字体）。它还下载 CSS 文件并将其调整为本地文件。用户代理可以适应获取除 WOFF2 之外的其他文件。见https://github.com/ssc-hrep3/google-font-download

生成的文件可以轻松添加到构建过程中（例如，像 vue-webpack 这样的 webpack 构建）。

【讨论】：

【解决方案15】：

编辑：正如 luckyrumo 所指出的，字体被贬低为：https://github.com/fontsource/fontsource

如果你使用 Webpack，你可能会对这个项目感兴趣：https://github.com/KyleAMathews/typefaces

例如说你想使用 Roboto 字体：

npm install typeface-roboto --save

然后将其导入应用的入口点（主 js 文件）：

import 'typeface-roboto'

【讨论】：

感谢您的链接！ typefaces 的后继 fontsource 正是我一直在寻找的：github.com/fontsource/fontsource CSS 还包含 Unicode 范围，根据我的经验，这是一个罕见的功能。

【解决方案16】：

您可以从https://github.com/google/fonts下载源字体

之后，使用font-ranger 工具将您的大型 Unicode 字体拆分为多个子集（例如拉丁文、西里尔文）。您应该使用该工具执行以下操作：

为您支持的每种语言生成子集
使用 unicode-range 子集来节省带宽
消除字体臃肿并针对网络进行优化
将字体转换为压缩的 woff2 格式
为旧版浏览器提供 .woff 后备
自定义字体加载和渲染
使用@font-face 规则生成 CSS 文件
自托管网络字体或在本地使用它们

字体管理员：https://www.npmjs.com/package/font-ranger

附：您还可以使用 Node.js API 自动执行此操作

【讨论】：

【解决方案17】：

您可以按照使用 PHP 开发的脚本进行操作。您可以在哪里使用脚本下载任何谷歌字体。它将下载字体并创建一个 CSS 文件并存档到 zip。
可以从GitHub下载源代码https://github.com/souravmsh/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>";
        } 
    } 
}

【讨论】：

【解决方案18】：

最简单的方法 - 使用`google-webfonts-helper`

假设我们要托管字体`Red Rose`：

打开google-webfonts-helper 并在左上角过滤所需的字体（输入Red Rose 并输入..）
从字符集中选择（默认为 latin；如果您需要扩展支持，请选择其他字符，例如 latin-ext）
选择样式（默认为常规）
来自Copy CSS 选项卡
- 如果您希望仅支持现代浏览器（woff2、woff），请选择 Modern Browser
- 如果您希望支持所有浏览器，请选择 Best Support（我选择了这个 - woff2、woff、ttf、svg、eot）
如果您的字体文件不在../fonts/ 路径中，您可以对其进行编辑以表示您的实际路径（对我来说是../assets/fonts/）
复制 CSS 并保留以备将来使用
下载名为red-rose-v1-latin-ext_latin的zip文件；解压并将所有字体直接放入您的assets/fonts 目录（根据您之前提供的内容）
在您希望嵌入的样式表中，粘贴复制的 CSS。如果您选择these options，它将如下所示

/* red-rose-regular - latin-ext_latin */
@font-face {
  font-family: 'Red Rose';
  font-style: normal;
  font-weight: 400;
  src: url('../assets/fonts/red-rose-v1-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Red Rose Regular'), local('RedRose-Regular'),
       url('../assets/fonts/red-rose-v1-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../assets/fonts/red-rose-v1-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../assets/fonts/red-rose-v1-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../assets/fonts/red-rose-v1-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../assets/fonts/red-rose-v1-latin-ext_latin-regular.svg#RedRose') format('svg'); /* Legacy iOS */
}

/* Red Rose will now be available for use in your stylesheet, provide this font */

:root {
  font-family: 'Red Rose', cursive, sans-serif;
}

就是这样！

【讨论】：

【解决方案19】：

如果你使用 Nuxt，你可以使用他们的专用模块：https://github.com/nuxt-community/google-fonts-module 对我来说，它比 webfonts 帮助器好得多，后者在构建过程中下载字体和生成没有 Unicode 范围的 CSS 文件时经常遇到问题。

【讨论】：

最简单的方法 - 使用google-webfonts-helper

假设我们要托管字体Red Rose：

最简单的方法 - 使用`google-webfonts-helper`

假设我们要托管字体`Red Rose`：