下载谷歌字体并设置使用它的离线网站

Question

我有一个模板，其中包含对Google字体的引用，类似于以下内容：

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300' rel='stylesheet' type='text/css'>

我该如何下载并安装它，以便在我的网页中离线运行时使用？

- user2147954

Answer 1

查看Google WebFonts助手

它可以让你下载谷歌的每一种Web字体，并提供实现的CSS代码建议。 此工具还允许你一次简单地下载所有格式，避免了繁琐的麻烦。

曾经想过要知道谷歌在哪里托管他们的Web字体吗？如果想直接从Google下载一个字体变体的所有.eot、.woff、.woff2、.svg、.ttf文件，则此服务可能会很有用（通常您的User-Agent会确定最佳格式）。

还可以查看他们的Github页面。

- Marco Kerwitz

---

我想知道为什么谷歌一开始没有做这件事情？+1 - tftd

这个很好用。当你从本地文件链接的时候，确保声明相应的内容类型 Content-type: text/css; charset: UTF-8。 - Clain Dsilva

如果您正在使用webpack或其他打包CSS/SASS导入的工具，则此方法是最佳选择。这个问题更详细地描述了该过程。 - Pace

在目标目录下运行此一行命令即可：curl -o f.zip "https://google-webfonts-helper.herokuapp.com/api/fonts/roboto?download=zip&subsets=latin,latin-ext&variants=regular,700" && unzip f.zip && rm f.zip，它会帮您下载并解压 Google 字体的 Roboto 字形（包括普通和粗体字形），并删除原始的 zip 文件。 - smnbbrv

网址现在更改为https://gwfh.mranftl.com。 - Giorgos Betsos

Answer 2

只需前往Google字体 - http://www.google.com/fonts/，将您喜欢的字体添加到收藏夹，然后按下载按钮。然后只需使用@fontface将此字体连接到您的网页即可。 顺便说一下，如果您打开所使用的链接，您将看到使用@fontface的示例

http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300

举个例子

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}

只需将字体文件的url地址更改为您已下载的本地链接。

您可以更轻松地完成此操作。

只需下载您已链接的文件即可:

http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300

将其命名为opensans.css或其他名称。

然后只需将url()中的链接更改为字体文件的路径。

然后用以下示例字符串替换您的示例字符串：

<link href='opensans.css' rel='stylesheet' type='text/css'>

- Dmitriy Butenko

---

与谷歌字体由谷歌服务器提供不同，这种方法仅依赖于WOFF格式，因此本质上更加有限。此外，谷歌以TTF格式分发其字体，而非WOFF格式。 - Jukka K. Korpela

谨慎起见，fonts.googleapis 会为不同的浏览器生成不同的 @font-face 声明。 - Huseyin Yagli

你能否在fontface中链接到TTF格式而不是WOFF？ - WJA

这是不正确的，因为谷歌从http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300发送特定于浏览器的CSS文件。所以，如果你在Chrome中打开它，你会得到一个不同的@font-face，而在IE或其他浏览器中打开它则会得到不同的结果。例如，WOFF2字体只会被发送到Firefox和Chrome，因为其他浏览器尚不支持它们。http://caniuse.com/#feat=woff2 - Joost van der Laan

不管此回答是否被接受，请忽略它。正如Joost van der Laan在这里指出的那样，它是不正确的。请参阅@marco-kerwitz下面的高分回答，应将其标记为正确答案。 - Appurist - Paul W

感谢您的评论，我确认访问页面上的结果是特定于浏览器的。如果您想解决这个问题，您可以在终端中运行 curl "https://YOUR GOOGLEAPIS URL HERE" >> fonts.css 并在 fonts.css 文件中获取您的结果。虽然不确定您是否仍然会以此方式丢失字体，但至少它是独立的。（当然，您仍然需要手动下载使用的外部字体文件） - George Dimitriadis

Answer 3

找到了一种逐步实现此目标的方法（适用于1个字体）：
（截至2013年9月9日）

1. 在http://www.google.com/fonts上选择您的字体
2. 使用“添加到收藏夹”蓝色按钮将所需字体添加到您的收藏夹中
3. 点击“从收藏夹中删除”按钮附近的“查看所有样式”按钮，确保您已选择其他您可能需要的样式，如“粗体”...
4. 点击页面右下角的“使用”选项卡按钮
5. 在页面顶部点击带有向下箭头图像的下载按钮
6. 在弹出消息中点击“zip文件”
7. 点击弹出窗口上的“关闭”按钮
8. 缓慢滚动页面，直到看到3个选项卡“Standrd | @import | Javascript”
9. 点击“@import”选项卡
10. 选择并复制介于'url('和')'之间的URL
11. 在新标签页的地址栏中复制并转到该网址
12. 执行“文件 > 另存为...”，并将其命名为“desiredfontname.css”（相应更改）
13. 解压缩您下载的字体.zip文件（应该会提取.tff）
14. 前往http://ttf2woff.com/，将从zip中提取的任何.tff转换为.woff格式
15. 编辑desiredfontname.css，用ttf2woff.com得到对应的转换过的.woff文件替换其中的任何URL [介于'url('和')'之间]；您写的路径应根据服务器doc_root设置
16. 保存该文件，并将其移动到最终位置并编写相应的<link/> CSS标签，以在HTML页面中导入这些字体
17. 从现在开始，在你的样式中使用font-family名称来引用这种字体

就是这样。因为我也遇到了同样的问题，而上面的解决方案对我没有起作用。

- 1111161171159459134

---

这些步骤完美地运行了。我只想补充一点，对于那些尚未使用woff文件扩展名的人，请确保在web.config中添加该mimetype。 - Coding101

看看Marco Kerwitz的回答。 - Herr_Schwabullek

Answer 4

其他回答并没有错，但我发现这是最快的方式。

1. 从Google字体下载zip文件并解压缩。
2. 将3个字体文件一次性上传到 http://www.fontsquirrel.com/tools/webfont-generator
3. 下载结果。

结果包含所有字体格式：woff、svg、ttf、eot。

作为额外的奖励，他们还为您生成css文件！

- sym3tri

---

如果我在阅读时不必思考就能得到答案，那么我会为此回答加1分。如果能找到一个直接的谷歌字体转换器而无需事先上传它们，那将是非常棒的。例如，在进行离线网站管理时使用此实用程序。 - Meetai.com

这个功能非常方便，可以为您生成不同的字体格式。但是任何使用它的人都要注意，生成的CSS并不是非常智能，它会将同一字体的两种（或更多）样式作为单独的字体族，而不是一个具有不同字重的字体族。但在CSS中自己修复它相当容易。 - Ken Sung

请查看Marco Kerwitz的答案。 - Herr_Schwabullek

我能够一次性上传10种字体，因此似乎3种字体的限制已经被取消或增加了。 - Adrian Hedley

Answer 5

如果您想明确声明软件包依赖关系或自动下载，您可以添加一个npm软件包以拉取谷歌字体并在本地提供服务。

Fontsource

Fontsource 允许您：

在整洁的NPM软件包中自托管开源字体。

您可以搜索npm以浏览可用字体，例如{{link2：scope:fontsource <typefacename>}}，然后像这样安装@fontsource/roboto或@fontsource/open-sans：

$ npm install @fontsource/roboto    --save 
$ npm install @fontsource/open-sans --save 

字体下载器

对于更通用的使用情况，有几个npm包可以通过两个步骤提供字体，首先安装库，然后指向您想要包含的字体名称和选项。

• Google Fonts Webpack插件
• Google Fonts离线
• Google Fonts
• 获取Google字体

进一步阅读：

• 如何离线使用 Material icons？
• 如何在 Electron 应用中离线使用 Material icons 和 Roboto 字体？
• 已存档: 字体

- KyleMit

---

非常好的简单解决方案! 非常感谢! - jsadev.net

Answer 6

三个步骤：

1. 在Google字体上下载您的自定义字体并下载.css文件，例如：下载http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300，并保存为example.css
2. 打开您下载的文件（example.css）。现在，您必须下载所有font-face文件并将它们保存在fonts目录中。
3. 编辑example.css：将所有font-face文件替换为您下载的.css文件

例如：

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

请看 src: -> url。下载http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2并保存到字体目录中。之后将所有已下载文件的url更改为此格式。现在它会看起来像：

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(fonts/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

** 下载包含 .css 文件的所有字体 希望这能帮助您

- duydb

Answer 7

基本上，您需要将字体包含在您的项目中。

@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: normal;
src: url('path/to/OpenSans.eot');
src: local('Open Sans'), local('OpenSans'), url('path/to/OpenSans.ttf') format('truetype');

- medina

---

文章链接已失效 - TecHunter

下载不包括.eot文件。 - frustrated-dev

Answer 8

使用Google Fonts时，您的工作流程分为3个步骤：“选择”、“自定义”和“嵌入”。如果您仔细观察“使用”页面右端，会看到一个小箭头，允许您下载当前收藏的字体。

之后，一旦字体已安装在您的系统上，您只需使用font-family CSS指令像使用任何其他常规字体一样即可。

- Pierre-Adrien

Answer 9

1) 在 Google Fonts 网站中选择你需要的字体和样式。

2) 然后会得到一个链接标签，在链接旁边点击导入（import）。

4. 复制链接中 URL(' here ') 中所包含的链接并将其粘贴到浏览器地址栏中搜索。

5. 然后你会得到类似于这样的东西：

6. 接着下载并保存在你的项目文件中！

7) 将其包含在你的 HTML 链接标签中，或者导入到你的 CSS 文件中 (https://istack.dev59.com/NvJ60.webp) (https://istack.dev59.com/XwK0l.webp)

8) 最后使用 Google Fonts 中提到的字体族（ton family）。

- Rishi Pardeshi

---

谢谢你的回答，但它与其他大多数已经指出的答案差不多。 - shaedrich

Answer 10

我使用duydb的答案，编写了以下Python代码来自动化这个过程。

import requests

with open("example.css", "r") as f:
    text = f.read()
    urls = re.findall(r'(https?://[^\)]+)', text)

for url in urls:
    filename = url.split("/")[-1]
    r = requests.get(url)
    with open("./fonts/" + filename, "wb") as f: 
        f.write(r.content)
    text = text.replace(url, "/fonts/" + filename)

with open("example.css", "w") as f:
        f.write(text)

希望这对于一些复制粘贴的死结有所帮助。

- Wytamma Wirth