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

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

<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/ ,将您喜欢的字体添加到您的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

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

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

另外看看他们的Github页面 。

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不适合我。

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

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

结果包含所有字体格式:woff,svg,ttf,eot

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

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

Google webfonts截图

之后,一旦字体安装在系统上,就可以像使用font-family CSS指令的任何其他常规字体一样使用它。

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

基本上你是在你的项目中包含字体。

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

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; } 

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

从你发布的链接下载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); }