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

退房 google webfonts helper

它可以让你下载谷歌的每一种网络字体,并为实现提供css代码建议。 该工具还允许您简单地一次下载所有格式,而无需麻烦。

想知道谷歌在哪里托管他们的网络字体吗?如果你想直接从谷歌下载字体变体的所有.eot、.woff、.woff2、.svg、.ttf文件,这项服务可能会很方便(通常你的用户代理会确定最佳格式)。

还可以看看他们 Github page .

只需转到谷歌字体- 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+无衬线:400斜体,600斜体,400600300

将其命名为opensans.css左右。

然后只需将url()中的链接更改为字体文件的路径。

然后将示例字符串替换为:

<link href='opensans.css' rel='stylesheet' type='text/css'>

找到了一种循序渐进的方法来实现这一点(对于1种字体):
( 截至2013年9月9日 )

1. 在选择字体 http://www.google.com/fonts
2. 使用“添加到收藏”蓝色按钮将所需的收藏添加到收藏中
3. 单击“从集合中删除”按钮附近的“查看所有样式”按钮,并确保您已经选择了其他可能需要的样式,如“粗体”。。。
4. 单击页面右下角的“使用”选项卡按钮
5. 单击顶部带有向下箭头图像的下载按钮
6. 单击出现的弹出消息上的“zip文件”
7. 点击弹出窗口上的“关闭”按钮
8. 慢慢滚动页面,直到您看到3个选项卡“Standrd|@import|Javascript”
9. 单击“@import”选项卡
10. 选择url并将其复制到 'url(' 和 ')'
11. 将其复制到新选项卡中的地址栏上,然后转到那里
12. 执行“文件>将页面另存为…”并将其命名为“desiredfontname.css”(相应替换)
13. 解压缩您下载的字体.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. 从谷歌字体下载zip文件并解压缩。
2. 一次上传3个字体文件到 http://www.fontsquirrel.com/tools/webfont-generator
3. 下载结果。

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

而且作为额外的奖励,他们也为您生成了css文件!

如果你想明确声明你的包依赖项或自动下载,你可以添加一个npm包来引入谷歌字体并在本地提供服务。

字体来源

Fontsource 允许您:

整洁捆绑的NPM包中的自托管开源字体。

您可以在npm中搜索 scope:fontsource < typefacename > 浏览可用的字体,如 @fontsource/roboto 或 @fontsource/open-sans 并按如下方式安装:

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

字体下载程序

对于更通用的用例,有几个npm包将分两步提供字体,首先是安装库,然后将其指向要包含的字体名称和选项。

• Google Fonts Webpack Plugin
• Google Fonts Offline
• Google Fonts
• Get Google Fonts

进一步阅读:

• How to host material icons offline?
• Using offline Material icons and Roboto font in Electron app
• 已存档 : Typefaces

3个步骤:

1. 在谷歌字体上下载您的自定义字体并下载.css文件 例如:下载 http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300 并另存为 示例.css
2. 打开您下载的文件( 示例.css ). 现在,您必须下载所有字体文件并将其保存在 字体 目录
3. 编辑 示例.css :将所有字体的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:->网址。下载 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文件的字体 希望它能帮助你

使用谷歌字体时,您的工作流程分为3个步骤:“选择”、“自定义”、“嵌入”。如果你仔细看,在“使用”页面的右端,有一个小箭头,可以让你下载当前收藏的字体。

之后,一旦字体安装在您的系统上,您只需要像使用 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');

1) 查看谷歌字体

2) 选择你的字体,它就是一种风格

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

4. 复制URL中的链接(“此处”)并将其粘贴到浏览器搜索栏上。

5. 然后你会得到这样的东西

6. 然后下载并保存到您的项目文件所在的位置!

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

8) 然后使用谷歌字体中提到的ton家族

我紧随其后 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)

希望这对复制粘贴死亡有帮助。

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

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

然后更改 CSS格式 从您发布的链接中选择包含本地字体。

从…起

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

到

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

瞧!你可能还需要做更多的事情,但以上是基本的。 This article 解释得稍微好一点。

只需下载字体并将其提取到文件夹中即可。然后链接该字体。 下面的代码对我来说很有效。

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