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

我有一个模板，它有一个像这样的谷歌字体的引用：

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

我怎样才能下载它，并将其设置为在我的网页中一直在离线运行？

Answer 1

只需转到Google字体 – http://www.google.com/fonts/ ，将您喜欢的字体添加到您的collections中，然后按下载button。 然后，只需使用@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 : http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300 : http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300

将它命名为opensans.css左右。

然后，只需将url（）中的链接更改为字体文件的path即可。

然后用<link href='opensans.css' rel='stylesheet' type='text/css'>replace你的示例string

Answer 2

我知道我迟到了，但是因为这在Google上排名第一：查看google webfonts助手 。 它可以让你下载谷歌的每一个Web字体，并build议实现的CSS代码。 这个工具还允许你一口气下载所有的格式。

曾经想知道谷歌托pipe他们的网页字体？ 如果您想直接从谷歌（通常您的用户代理将确定最佳格式）下载字体变体的所有.eot，.woff，.woff2，.svg，.ttf文件，则此服务可能非常方便。

另外看看他们的Github页面 。

Answer 3

find一步一步的方式来实现这一点（1字体）：
（ 截至2013年9月9日 ）

1. 在http://www.google.com/fonts上select您的字体;
2. 使用“添加到collections”蓝色button将所需的一个添加到您的collections
3. 点击“从collections夹中移除”button旁边的“查看所有样式”button，并确保您已经select了其他样式，如“粗体”…
4. 点击页面右下方的“使用”标签button
5. 点击上方的下载button，向下箭头图像
6. 点击出现的popup消息上的“zip文件”
7. 点击popup窗口上的“closures”button
8. 慢慢滚动页面，直到看到3个标签“Standrd | @import | Javascript”
9. 点击“@import”标签
10. select并复制'url('和')'之间'url('
11. 将其复制到新标签页的地址栏中，然后转到此处
12. 做“文件>保存页面…”并将其命名为“desiredfontname.css”（相应地replace）
13. 解压缩您下载的字体.zip文件（.ttf应该被提取）
14. 转到“ http://ttf2woff.com/ ”，并将zip中提取的任何.ttf转换为.woff
15. 编辑desiredfontname.css并将其中[ 'url('和')' ]之间'url('任何urlreplace为您在ttf2woff.com上获得的相应转换的.woff文件; 你写的path应该根据你的服务器doc_root
16. 保存文件并将其移动到最终位置，然后写入相应的<link/> CSS标签以将其导入HTML页面
17. 从现在开始，请在您的样式中通过它的font-family名称来引用此字体

而已。 因为我有同样的问题，顶上的解决scheme不适合我。

Answer 4

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

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

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

并作为额外的奖励，他们也为你生成的CSS文件！

Answer 5

使用Google字体时，您的工作stream程分为3个步骤：“select”，“查看”，“使用”。 如果仔细观察，在“使用”页面的右端，有一个小箭头可让您下载当前collections中的字体。

之后，一旦字体安装在系统上，就可以像使用font-family 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个步骤：

1. 在Goole字体上下载您的自定义字体并下载.css文件例如：下载http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300并另存为;example.css
2. 打开你下载的文件（ example.css ）。 现在你必须下载所有的字体文件并保存在字体目录中。
3. 编辑example.css ：将所有的font-face文件replace为你的.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; } 

Answer 8

您需要下载字体并在本地参考。

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

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

从

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

至

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

瞧！ 可能还有一些你需要做的，但以上是基础知识。 这篇文章解释得好一点。

Answer 9

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

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