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

问题描述 投票:255回答:16

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

fonts google-font-api
16个回答
208
投票

请记住,我的答案已经老了很多。

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

所以不要让这个是目前接受的答案的事实给你的印象是这仍然是最好的。


您现在还可以通过github在他们的google/font存储库下载google的整个字体集。他们还提供~360MB 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 Dev Tools中弹出错误。

对于这个解决方案,只需要真正的类型,但是当你想要包含不同的字体时,定义更多也不会受到影响,比如font-awesome

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

1
投票

我的解决方案是从谷歌网络字体下载TTF文件,然后使用onlinefontconverter.com


1
投票

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

你可以在这里使用这个工具:http://nikoskip.me/gfonts.php

例如,如果您使用上述导入URL,您将得到:

enter image description here


1
投票

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

例如。说你想使用Roboto字体:

npm install typeface-roboto --save

然后只需在应用程序的入口点(主js文件)中导入它:

import 'typeface-roboto'

1
投票

如果你想在你自己的服务器上托管所有字体(或其中一些),你可以从这个repo下载字体并按照你想要的方式使用它:https://github.com/praisedpk/Local-Google-Fonts

如果您只是想这样做来修复Google字体附带的杠杆浏览器缓存问题,您可以使用替代fonts CDN,并将字体包含为:

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

0
投票

除了k0pernicus,我想建议best-served-local。它也是一个bash(v4)脚本,使网络服务器运营商能够从他们自己的网络服务器下载和提供谷歌网络字体。但除了其他bash脚本之外,它还允许用户完全自动化(通过cron等)提供最新的字体文件和css文件。


0
投票

有一个非常简单的脚本,用普通的Java编写,可以从Google Web Font链接下载所有字体(支持多种字体)。它还会下载CSS文件并使其适应本地文件。用户代理可以适用于获得除WOFF2之外的其他文件。见https://github.com/ssc-hrep3/google-font-download

生成的文件可以很容易地添加到构建过程(例如像vue-webpack这样的webpack构建)。


0
投票

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

之后使用font-ranger工具将您的大型Unicode字体拆分为多个子集(例如拉丁语,西里尔语)。您应该使用该工具执行以下操作:

  • 为您支持的每种语言生成子集
  • 使用unicode-range subsetting来节省带宽
  • 从您的字体中删除膨胀并为Web优化它们
  • 将字体转换为压缩的woff2格式
  • 为旧版浏览器提供.woff后备功能
  • 自定义字体加载和呈现
  • 使用@ font-face规则生成CSS文件
  • 自托管Web字体或在本地使用它们

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

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


200
投票

有一个工具localfont.com可以帮助您下​​载所有字体变体。它还生成相应的CSS用于实现。 弃用

localfont失败了。相反,作为Damir suggests,你可以使用google-webfonts-helper



132
投票

伟大的解决方案是google-webfonts-helper

它允许您选择多个字体变体,这样可以节省大量时间。


60
投票

我写了一个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


12
投票

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,处理遗留浏览器错误等。当您使用谷歌网络字体(由谷歌托管)时,谷歌会自动链接到该浏览器的正确字体类型。


6
投票

只要您坚持使用字体许可证的条款 - 通常是OFL,这是法律允许的。

您需要一组Web字体格式,而Font Squirrel Webfont Generator可以生成这些格式。

但OFL要求在修改字体时重命名字体,并使用生成器意味着修改它们。


2
投票

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

它处于早熟阶段,但可以在这里找到:DaAwesomeP / php-offline-fonts


1
投票

我在一项艰巨的任务中使用了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,在检索名称中带有空格的字体时效果更好。


1
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.