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

我有一个模板，它具有对Google字体的引用，如下所示：

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

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

只需转到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'>

查看Google Webfonts助手

它可以让您下载Google的每种网络字体，并为实现提供建议的CSS代码。该工具还允许您一次轻松地下载所有格式，而无需麻烦。

是否曾经想知道Google在何处托管其Web字体？如果您想直接从Google下载字体变体的所有.eot，.woff，.woff2，.svg，.ttf文件（通常，您的User-Agent将确定最佳格式），则该服务可能会很方便。

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

发现了一步一步的方式来实现这一点（1种字体）：
（作为九月-9 2013）

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

而已。原因我遇到了同样的问题，最上面的解决方案对我不起作用。

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

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

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

并且作为额外的好处，它们也为您生成了CSS文件！

3个步骤：

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：->网址。下载http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2并保存到字体目录。之后，将网址更改为所有下载的文件。现在看起来像

@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文件的字体，希望对您有帮助

如果您想显式声明您的程序包依赖关系或自动进行下载，则可以添加一个节点程序包以引入google字体并在本地投放。

NPM -谷歌字体下载小号

该字体的项目创造了开放源码的字体NPM包：

每个软件包都附带了所有必要的格式和CSS，以自托管开源字体。
已添加所有Google字体以及少量但不断增加的其他开源字体。

只要搜索NPM的浏览喜欢的可用字体的字体-的Roboto或字体开放的SAN和安装这样的：typeface-<typefacename>

$ npm install typeface-roboto    --save 
$ npm install typeface-open-sans --save 
$ npm install material-icons     --save 

npm-Google字体下载器

对于更通用的用例，有几个npm软件包将分两步交付字体，首先获取软件包，然后将其指向要包含的字体名称和选项。

以下是一些选项：

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

进一步阅读：

• 如何离线托管材质图标？
• 在Electron应用程序中使用离线Material图标和Roboto字体

本质上，您是在项目中包含字体。

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

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

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

我按照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)

希望这有助于复制粘贴的死亡。

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

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

然后CSS从发布的链接中更改，以在本地包含字体。

从

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

至

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

瞧！您可能还需要做更多的工作，但是以上是基础知识。本文的解释要好一些。

只需下载字体并将其解压缩到一个文件夹中即可。然后链接该字体。下面的代码为我正常工作。

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