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

Question

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

Answer 1

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

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

• localfont
• neverpanic /谷歌的字体下载
• 谷歌-web字体辅助

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

您现在还可以通过谷歌/字体存储库中的github下载谷歌的整个字体集.它们还提供了~360MB的字体拉链快照.

首先将字体选择下载为压缩包,为您提供一堆真正的字体.将它们复制到公共场所,您可以从您的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

Answer 2

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

localfont失败了.相反,正如Damir建议的那样,你可以使用google-webfonts-helper

Answer 3

很棒的解决方案是google-webfonts-helper .

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

Answer 4

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

请参阅https://footpanic.de/blog/2014/03/19/downloading-google-web-fonts-for-local-hosting/以获取脚本(我不会在此处复制它,所以我只需要在我需要的地方).

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

Answer 5

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 Web Fonts(由Google托管)时,Google会自动链接到该浏览器的正确字体类型.

Answer 6

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

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

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