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

实际上，您正在将字体包含到您的项目中。

@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个步骤: “选择”，“自定义”，“嵌入”。如果你仔细看，在“使用”页面的右端，有一个小箭头，它允许你下载字体当前在您的集合。

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

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

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

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

从

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

敬

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

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

只需到谷歌字体 -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'>

找到了一个逐步实现的方法(对于1个字体) :
(截至2013年9月9日)

1. 在 http://www.google.com/fonts选择你的字体
2. 使用“ Add to Collection”蓝色按钮将所需的一个添加到您的集合中
3. 点击“查看所有样式”按钮附近的“从集合中删除”按钮，并确保您已经选择了其他样式，您可能也需要如“粗体”..。
4. 单击页面右下角的“使用”选项卡按钮
5. 单击顶部带有向下箭头图像的下载按钮
6. 在弹出的消息上点击“ zip file”
7. 点击弹出窗口上的“关闭”按钮
8. 慢慢地滚动页面，直到你看到3个标签“ Standard |@import | Javascript”
9. 单击“@import”选项卡
10. 选择并复制 'url('和 ')'之间的 URL
11. 将它复制到地址栏中的一个新标签中，然后到那里
12. 执行“ File > Save page as...”并将其命名为“ desiredfontname.css”(相应地替换)
13. 解压下载的 fonts.zip 文件(. ttf 应该被解压)
14. 转到“ http://ttf2woff.com/”并将从 zip 中提取的任何. ttf 转换为. woff
15. 编辑 desiredfontname.css并将其中[ 'url('和 ')'之间]的任何 URL 替换为相应的转换后的。你在 ttf2woff.com 上得到的 woff 文件; 你写的路径应该根据你的服务器 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 文件太！

看看 < strong > google webfonts helper

它可以让你下载谷歌的每一个网页字体和建议的实现 CSS 代码。 这个工具还允许您轻松地一次下载所有格式。

想知道谷歌在哪里存放他们的网络字体吗？如果您想下载所有。Eot.沃夫。沃夫2号。Svg.Ttf 文件的字体变体直接从谷歌(通常你的用户代理将决定最好的格式)。

再看看他们的 Github 页面。

只要下载字体和解压缩到一个文件夹。然后链接该字体。 下面的代码适合我。

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

3个步骤:

1. 在 GooleFonts 上下载自定义字体并下载 load.css 文件 例如: 下载 http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300 并保存为 < strong > example.css
2. 打开您下载的文件(Example.css)。现在您必须下载所有字体文件并将它们保存在 字体目录中。
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:-> url。下载 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 文件 希望对你有所帮助

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

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

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

Fontsource

Fontsource 允许你:

自主开源字体在整齐捆绑的 NPM 包中。

你可以在 npm 中搜索 scope:fontsource <typefacename>来浏览可用的字体，比如 @ fontsource/roboto或者 @ fontsource/open-sans，然后像这样安装:

$ npm install @fontsource/roboto    --save
$ npm install @fontsource/open-sans --save

字体下载

对于更一般的用例，有几个 npm 包可以分两个步骤提供字体，首先是安装库，然后将其指向希望包含的字体名称和选项。

• 谷歌字体 Webpack 插件
• 离线谷歌字体
• 谷歌字体
• 获取谷歌字体

进一步阅读:

• 如何离线托管材质图标？
• 在电子应用程序中使用离线材质图标和 Roboto 字体
• 归档: 字体