回到所有的课程
课程库

添加谷歌字体

在项目设置中添加谷歌字体,并在Webflow项目中使用它们。

这个视频展示了一个旧的用户界面。更新版本即将到来!

类型中直接向项目添加更多字体字体下拉菜单。只选择添加字体我们会带你去你的项目设置→字体设置.在那里,您可以选择和添加谷歌字体对你的项目。

使用谷歌字体只是将额外字体导入Webflow项目的三种方法之一。另外两个是Adobe字体(Typekit)而且自定义字体,适用于所有套餐。

在本课中

浏览谷歌字体

如果您想在选择之前浏览所有谷歌字体选项,请访问谷歌字体[xxx]谷歌的免费网页字体集合的现场预览。在谷歌字体页面上,您可以浏览和排序不同的类别,并测试字体将如何出现。在将字体添加到Webflow项目之前,这可以让您更好地了解字体在一定大小和粗细下的外观。

在字体设置页面的谷歌字体部分的右侧,有一段文字指导用户查看谷歌的收藏的实时预览。第一步是点击突出显示的谷歌字体链接。
第二步是用类别过滤你的字体搜索。谷歌字体页面显示了几个字体示例,显示“为web构建的现代方式”。

在项目中添加谷歌字体

一旦你心中有了选择,转到你的Webflow项目:

  1. 从下拉菜单中选择字体项目设置→字体→谷歌字体
下拉菜单在“从列表中选择字体:”部分展开。
  1. 选择项目所需的权重变量、语言和脚本。稍后您总是可以回到这里来添加或删除选择。
从谷歌字体列表中选择了一种名为Aleo的字体。检查使用的重量变量为300、常规和700。Latin是标记为“语言/脚本”要包含的唯一选项。在这些设置下面有一个绿色的添加字体按钮。
  1. 添加字体

所选字体将在下次加载时在Webflow设计器中可用。刷新设计器(如果已经打开)。

在样式面板上的Typography设置中选择了一种名为Aleo的字体。字体名称将高亮显示。
需要知道
在设计器中已经可用的谷歌字体(如Lato)不会显示在下面的谷歌字体列表中项目设置→字体

删除谷歌字体

要从项目中删除谷歌字体,只需将其删除项目设置→字体→谷歌字体。

在添加的谷歌字体部分下,最右侧的灰色删除按钮被突出显示。在字体名称Aleo下,有添加的权重变量和语言的详细信息。
需要知道
项目中删除该字体时仍然附加该字体的元素仍将显示为已选中,但将呈现为Times New Romans。
尝试Webflow-是免费的
Baidu
map