下载谷歌的字体和设置使用它脱机网站(Downloading a Google font and se

我有一个模板，它有一个谷歌的字体这样的参考：

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

我怎样才能下载它，并把它架在我的页面中使用其离线所有的时间运行？

Answer 1:

只要到谷歌的字体- 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 2:

看看谷歌网络字体帮手

它可以让你下载谷歌的每一个网页的字体和建议的CSS代码的执行。 该工具还允许您只需下载各种格式的一次没有麻烦。

曾经想知道谷歌托管的网络字体？ 如果您想直接从谷歌（通常是您的User-Agent将确定最佳格式）下载所有.eot，.woff，.woff2，.SVG，.TTF字体变种的文件，该服务可能会派上用场。

也看看他们的Github的页面 。

Answer 3:

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

1. 选择你的字体在http://www.google.com/fonts
2. 添加所需的一个到您的收藏使用“添加到收藏集”蓝色按钮
3. 按附近的“查看所有样式”按钮按钮“从收藏中删除”，并确保您选择其他款式，你可能还需要如“大胆” ...
4. 点击页面右下角的“应用”标签按钮
5. 点击顶部的下载按钮与一个向下的箭头图片
6. 点击“压缩文件”上出现的弹出信息
7. 点击“关闭”按钮，在弹出的
8. 直到看到3个标签慢慢滚动页面“STANDRD | @import |的Javascript”
9. 点击“@import”标签
10. 选择并复制的URL 'url('和')'
11. 在新标签中，地址栏上的复制和去那里
12. 做“文件>网页另存为...”并命名为“desiredfontname.css”（相应的更换）
13. 解压缩.zip文件你下载（.TTF应该提取）的字体
14. 进入“ http://ttf2woff.com/ ”及把从解压缩后的任何的.ttf到.woff
15. 编辑desiredfontname.css并在其中替换任何URL [之间'url('和')'与相应的转换] .woff文件你有上ttf2woff.com; 你写的路径应该根据自己服务器的doc_root是
16. 保存文件，并在其最后的地方移动，并编写相应<link/> CSS标签在HTML页面中导入这些
17. 从现在开始，请参阅此字体由它的font-family的名字在你的风格

而已。 因为我有同样的问题，并在上面的解决方案，我没有工作。

Answer 4:

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

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

结果包含所有字体格式：WOFF，SVG，TTF，EOT。

而作为一个额外的奖励，他们为您生成CSS文件呢！

Answer 5:

3个步骤：

1. 下载文件古尔字体和降负荷.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; } 

看看源： - > URL。 下载http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2并保存到fonts目录中。 之后，变更网址到所有下载的文件。 现在，它会看起来像

 @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 6:

看看这个方便的文章来解释如何脱机使用谷歌的字体

从本质上讲要包括的字体到您的项目。

@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 7:

当使用谷歌的字体，您的工作流程在3个步骤分为：“选择”，“自定义”，“嵌入”。 如果你仔细观察，在“使用”页面的右端，有一个小箭头，它允许你下载当前的字体您的收藏。

在此之后，一旦字体安装到系统上，你只需要使用它就像使用任何其他常规字体font-family CSS指令。

Answer 8:

我跟着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)

希望这有助于与一些复制粘贴死亡。

Answer 9:

如果您想明确地声明你的包依赖性或自动下载，你可以添加一个节点包在谷歌的字体，和本地服务。

NPM -谷歌字体下载

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

每个包附带所有必要的FONS和CSS自托管的开放源码字体。
所有谷歌的字体已被添加以及其他开源字体小，但越来越多。

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

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

NPM -谷歌字体下载-

对于更一般的使用情况，有几个NPM包，将提供的字体分两步，首先通过获得的包，然后由它指向的字体名称和选择你想加入。

这里有一些选择：

• 谷歌字体的WebPack插件
• 谷歌字体离线
• 谷歌字体
• 获取谷歌字体

延伸阅读 ：

• 如何离线主体材料的图标？
• 使用在电子应用的离线材料的图标和字体的Roboto

Answer 10:

您需要下载的字体和本地引用它。

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

然后，更改CSS从您发布到包括本地字体的链接。

从

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

至

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

瞧！ 可能有一些你需要做的，但上面的基础知识。 本文介绍了一个更好一点。

Answer 11:

只需下载字体和文件夹中提取它。 然后链接该字体。 下面的代码为我工作正常。

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

文章来源: Downloading a Google font and setting up an offline site that uses it