下载 Google 字体并设置使用它的离线站点

Question

我有一个模板，它引用了这样的 Google 字体：

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

我如何下载并设置它以在我一直离线运行的页面中使用？

Answer 1

查看google webfonts helper

它可以让你下载谷歌的每一种网络字体，并为实现推荐 css 代码。 此工具还允许您轻松地一次下载所有格式。

想知道 Google 在哪里托管他们的网络字体吗？如果您想直接从 google 下载字体变体的所有 .eot、.woff、.woff2、.svg、.ttf 文件（通常您的用户代理会确定最佳格式），此服务可能会很方便。

还可以看看他们的Github page。

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'>

Answer 3

找到了实现此目的的分步方法（对于 1 种字体）：
（截至 2013 年 9 月 9 日）

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

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

Answer 4

其他答案没有错，但我发现这是最快的方法。

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

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

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

Answer 5

如果您想显式声明您的包依赖项或自动下载，您可以添加一个 npm 包来拉入 google 字体并在本地提供服务。

字体来源

Fontsource 允许您：

在整齐捆绑的 NPM 包中自托管开源字体。

您可以在 npm 中搜索 scope:fontsource &lt;<em>typefacename</em>&gt; 以浏览可用的字体，例如 @fontsource/roboto 或 @fontsource/open-sans 并像这样安装：

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

字体下载器

对于更通用的用例，有几个 npm 包将分两步提供字体，首先是安装库，然后将其指向您想要包含的字体名称和选项。

• Google Fonts Webpack Plugin
• Google Fonts Offline
• Google Fonts
• Get Google Fonts

延伸阅读：

• How to host material icons offline?
• Using offline Material icons and Roboto font in Electron app
• 已存档：Typefaces

Answer 6

三个步骤：

1. 在 Goole Fonts 上下载您的自定义字体并下载 .css 文件 例如：下载http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300 并保存为 example.css
2. 打开您下载的文件 (example.css)。现在您必须下载所有字体文件并将它们保存在 fonts 目录中。
3. 编辑 example.css：将所有字体文件替换为您的 .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并保存到fonts目录。之后将 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 文件的字体 希望对你有帮助

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

Answer 8

使用 Google 字体时，您的工作流程分为 3 个步骤：“选择”、“自定义”、“嵌入”。如果您仔细观察，在“使用”页面的右端，有一个小箭头，可以让您下载当前收藏中的字体。

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

Answer 9

1) 使用谷歌字体

2) 选择你的字体，这是一种风格

3）然后你会得到一个链接标签，链接的一侧点击导入

4. 复制其存在于 URL 中的链接（'此处'）并将其粘贴到浏览器搜索栏上。

5. 然后你会得到这样的东西

6. 然后下载它并将其保存在您的项目文件所在的位置！

7) 然后将其包含在您的 HTML 链接标签中或将其导入您的 CSS 文件中 (https://i.stack.imgur.com/NvJ60.jpg) (https://i.stack.imgur.com/XwK0l.jpg)

8)然后使用谷歌字体中提到的ton族

Answer 10

我按照duydb's 的回答生成了下面的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)

希望这有助于解决一些复制粘贴问题。

Answer 11

你需要下载字体并在本地引用它。

从您发布的链接下载CSS，然后下载所有WOFF 文件并（如果需要）将它们转换为TTF。

然后将您发布的链接中的CSS 更改为在本地包含字体。

来自

url(http://themes.googleusercontent.com/static/fonts/opensans/v6/
DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff)

到

url(/path/to/font/font.woff)

瞧！您可能还需要做一些其他事情，但以上是基础知识。 This article 解释得更好。

Answer 12

只需下载字体并将其解压缩到一个文件夹中。然后链接该字体。 下面的代码对我很有效。

body { 
  color: #000; 
  font-family:'Open Sans';
  src:url(../../font/Open_Sans/OpenSans-Light.ttf); 
}