logo标签列表

如何在自己的服务器上托管谷歌网页字体？

fontsgoogle-font-api
292

我需要在一个内部应用中使用一些谷歌字体。客户端可能有或没有网络连接。阅读许可条款，似乎合法允许。

13个回答
232
请记住，我的回答已经过时了。
下面还有其他更技术上先进的答案，例如： 所以不要因为这是当前被接受的答案而让你觉得这仍然是最好的答案。
你现在还可以通过谷歌的google/font存储库在github上下载谷歌的整个字体集。他们还提供了一个1GB字体的zip快照。

You first download your font selection as a zipped package, providing you with a bunch of true type fonts. Copy them somewhere public, somewhere you can link to from your css.

On the google webfont download page, you'll find a include link like so:

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

It links to a CSS defining the fonts via a bunch of @font-face defintions.

Open it in a browser to copy and paste them into your own CSS and modify the urls to include the right font file and format types.

So this:

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

becomes this:

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

As you can see, a downside of hosting the fonts on your own system this way is, that you restrict yourself to the true type format, whilst the google webfont service determines by the accessing device which formats will be transmitted.

Furthermore, I had to add a .htaccess file to my the directory holding the fonts containing mime types to avoid errors from popping up in Chrome Dev Tools.

For this solution, only true type is needed, but defining more does not hurt when you want to include different fonts as well, like font-awesome.

#.htaccess
AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff
37
你不必局限于TrueType字体，只需下载.woff文件即可。例如，在您的网络浏览器中输入'http://themes.googleusercontent.com/static/fonts/cantarell/v3/...80lGh-uXM.woff'，将其保存为'/fonts/Cantarell-Bold.woff'，并更新CSS以匹配(url('/fonts/Cantarell-Bold.woff'))。 - Anthony Briggs
2
谷歌提供多种字体格式是有原因的 - TrueType 字体无法在旧浏览器上工作。WOFF 是 W3C 标准。 - Michael McGinnis
3
向下滚动到bash脚本解决方案-太棒了！ - Dr. Max Völkel
3
文件的内容根据使用的浏览器而发生变化。 - Krii
3
以下列出的替代方案相比于这个回答更容易部署；此外，从技术上讲，这个回答在几个方面是不正确的（没有限制TTF，TTF是一个糟糕的想法，这将导致每个浏览器产生不同的结果，您不能在任何公共场所托管字体，因为同源策略适用）。请不要这样做，请使用下面的其他回答之一。 - Robin Berjon
显示剩余10条评论
165

一个很棒的解决方案是google-webfonts-helper。

它允许你选择多个字体变体，节省了很多时间。

很棒的工具！我喜欢它。你可以一键预览字体并下载所有所需文件。 - cuixiping
非常好的工具。运行非常顺畅，还可以下载 latin-ext 字体。 - piotrekkr
3
这是最佳选择。它可以完成所有操作，甚至可以指定字体文件夹前缀。 - Maciej Krawczyk
这个解决方案帮我避免了很多问题。我在使用Golang中的chromedp生成PDF时，由于远程字体调用，设计有时会出现问题。一旦我将所有字体移动到本地服务器上，所有问题都得到了解决。非常好的解决方案。 - Krishnadas PC
完美。该解决方案允许仅生成需要下载的内容。 - Joshua Poling
64
4
太棒了！（希望它能够正常工作，但我还没有测试过。）多年来，我一直在寻找类似的东西。开玩笑的，我甚至开始编写自己的脚本，但是远远不完整。令人难以置信，如此少数的人想要这个。谷歌将这些字体隐藏在生成的字符串后面，并且在存储库中没有公开实际的Web字体文件，只有ttf文件。他们想让我们使用他们的字体，他们想让我们使用他们的服务器，因为他们会利用此进行跟踪。即使最注重隐私的人也会从谷歌的服务器中嵌入字体。 - redanimalwar
1
我唯一关心的是实际的字体许可证，但并没有仔细研究过它们。我只知道字体许可证与GPL或MIT有所不同。所以我们真的可以合法地从谷歌服务器上获取这些字体并在我们自己的服务器上使用吗？再说一遍，我一分钟都不相信谷歌是为了让世界变得更好而免费提供所有这些字体的，他们实际上付钱给开发人员为他们制作开放字体，所以肯定会得到一些回报，大量的数据。如果您不担心隐私问题，您可以通过这种方式在本地测试这些字体而无需连接互联网。 - redanimalwar
3
这个答案应该得到更多的赞，因为这个脚本可以下载所有字体格式和子集，而不像localfont.com只能下载部分。 - piotrekkr
我知道你可能会认为我很懒，但作为一个普通的Windows用户，不得不编译等操作才能使用它真的很烦人… - Lucas Bustamante
1
@LucasB 没有编译涉及。这是一个bash脚本。我知道Windows没有Bash，但可以随意重新实现以支持Windows。这只是不属于我的用例，所以我没有花时间在它上面。 - neverpanic
1
@redanimalwar 您可以通过以下方式查找每种字体的许可证：https://fonts.google.com/specimen/Source+Code+Pro#license。其中大部分都是OFL下的。OFL相当宽松，例如，在使用OFL许可的字体排版的文档中不需要署名（参见https://en.wikipedia.org/wiki/SIL_Open_Font_License以及从该WP文章链接的官方网站链接的OFL FAQ）。对于谷歌来说，这只是另一种吸引网络创作者使用其CDN的工具，因为它很方便，可以更好地跟踪页面访问者。 - maxschlepzig
14
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');
}

当您自己托管网络字体时，您需要正确链接每种字体类型，处理旧版浏览器的错误等。当您使用由Google托管的Google Web Fonts时，Google会自动链接到该浏览器的正确字体类型。
1
请提供一个链接，解释如何使用“通用”的CSS代码和现代浏览器的“简化”代码！ - ItalyPaleAle
2
所以我需要巧妙地为浏览器提供不同的格式。我知道这是高度不鼓励的，但我们正在向一些中国客户提供我们的页面，这也是我们想要托管它的主要原因。他们封锁了大多数谷歌资源。 - Lionel Chan
6
只要您遵守字体许可证的条款（通常是OFL），就可以在法律上允许使用。 您需要一组Web字体格式，Font Squirrel Webfont Generator可以生成这些格式。但是，如果修改了字体，则必须根据OFL要求对其进行重命名，并且使用生成器会导致修改。
1
或者，根据字体的不同，您可以直接从Font Squirrel获取Webfont套件。http://www.fontsquirrel.com/fonts/open-sans - Jack Frost
3
我有一个类似于@neverpanic的用PHP编写的脚本，可以自动从Google下载CSS和字体（包括提示和未提示的）。然后根据用户代理从您自己的服务器提供正确的CSS和字体。它具有自己的缓存，因此每个用户代理的字体和CSS只会下载一次。
该脚本处于早期阶段，但可以在DaAwesomeP/php-offline-fonts中找到。
3

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

假设我们要托管字体红玫瑰:

  • 打开 google-webfonts-helper 并在左上角过滤所需的字体（输入 红玫瑰 并回车..）
  • 选择字符集（默认为 拉丁文；选择其他字符集，例如 拉丁文扩展 如果您需要扩展支持）
  • 选择样式（默认为 常规）
  • 从 复制 CSS 标签页中
    • 如果您只希望支持现代浏览器（woff2、woff），则选择 现代浏览器
    • 如果您希望支持所有浏览器（我选择了这个选项- woff2、woff、ttf、svg、eot），则选择 最佳支持
  • 如果您的字体文件不在 ../fonts/ 路径下，则可以编辑它以表示您的实际路径（对我而言是 ../assets/fonts/）
  • 复制 CSS 并保存以备将来使用
  • 下载名为 red-rose-v1-latin-ext_latin 的 zip 文件；解压缩它并将所有字体直接放入您的 assets/fonts 目录中（根据您之前给出的内容）
  • 在您希望嵌入的样式表中，粘贴复制的 CSS。如果您选择了这些选项，其外观将如下所示
/* 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;
}
  • 就是这样了！
2
您可以直接从Google下载所有字体格式的变种，并将它们包含在您的CSS中，以从您的服务器提供服务。这样，您就不必担心Google跟踪您网站的用户。但是，缺点可能会减慢您自己的服务速度。字体对资源要求相当高。我还没有在这个问题上做过任何测试，想知道是否有人有类似的想法。
当涉及到用户隐私时，这应该是正确的答案。也就是说，自己托管自己的字体。 - John Greene
2

如果您想要将所有字体（或其中一些）托管在自己的服务器上，您可以从此存储库下载字体并按照您想要的方式使用：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" />
2
1
谢谢提供链接！typefaces的继任者fontsource正是我所寻找的：https://github.com/fontsource/fontsource 根据我的经验，CSS还包含Unicode范围，这是一个罕见的特性。 - luckyrumo
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接