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

它允许您下载Google的每种网络字体，并为实施建议css代码。此工具还允许您一次性轻松下载所有格式。

曾经想知道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');
}

只需将网址更改为字体文件上的本地链接，即已下载。

你可以做得更轻松。

只需下载文件即可：

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日）

在http://www.google.com/fonts
选择您的字体
使用“添加到收藏集”蓝色按钮
将所需的一个添加到您的收藏中
点击“从收藏中删除”按钮旁边的“查看所有样式”按钮，确保您选择了其他可能需要的样式，例如“粗体”......

点击页面右下角的“使用”标签按钮

点击顶部的下载按钮，带有向下箭头图像

点击出现的弹出消息中的“zip文件”

点击弹出窗口中的“关闭”按钮

慢慢滚动页面，直到看到3个标签“Standrd | @import | Javascript”

点击“@import”标签

选择并复制'url('和')'
之间的网址
将其复制到新标签中的地址栏并转到

执行“文件＆gt;将页面另存为...”并将其命名为“desiredfontname.css”（相应替换）

解压缩您下载的字体.zip文件（应提取.ttf）

转到“http://ttf2woff.com/”并将从zip中提取的任何.ttf转换为.woff

修改desiredfontname.css并将'url('和')'之间的任何网址替换为您在ttf2woff.com上获得的相应转换后的.woff文件;您编写的路径应该根据您的服务器doc_root

保存文件并将其移至最终位置并编写相应的<link/> CSS标记以在HTML页面中导入这些文件

从现在开始，请在样式
中按其font-family名称引用此字体

就是这样。 因为我遇到了同样的问题而且顶部的解决方案对我不起作用。

Answer 4

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

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

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

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

Answer 5

3个步骤：

在Goole Fonts上下载自定义字体并下载.css文件例如：下载http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300 并保存为 example.css
打开您下载的文件（ example.css ）。现在，您必须下载所有font-face文件并将其保存在 fonts 目录中。
修改 example.css ：将所有font-face文件替换为.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： - ＆gt;网址。下载http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2并保存到字体目录。之后更改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 6

请查看this handy article，了解如何离线使用Google字体

基本上，您将字体包含在项目中。

@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

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

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

Answer 8

1)去谷歌字体

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

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

复制 URL 中存在的链接（“此处”）并将其粘贴到浏览器搜索栏上。
然后你会得到这样的东西
然后下载它并将其保存在您的项目文件所在的位置！

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

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

Answer 9

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

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

npm-Google字体下载 s

typefaces project为开源字体创建NPM包：

每个软件包都附带了所有必要的fon和css，以自托管开源字体。
已添加所有Google字体，以及一小部分但还在不断增加的其他开源字体列表。

只需search npm即可typeface-<typefacename>浏览可用的字体，例如typeface-roboto或typeface-open-sans并按以下方式安装：

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

npm-Google字体下载- ers

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

以下是一些选项：

进一步阅读：

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

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

12 个答案:

查看google webfonts helper

npm-Google字体下载 s

npm-Google字体下载- ers