# 添加第三方字体 | Creght 可视化文档

> Creght 内置了常用的十多款字体，但没有收录的字体也很多，如果你想使用其他字体，可以按照此手册来添加第三方字体。 目前我们支持添加 3 个来源的字体： Google Fonts ：众多英文字体，但中文字体很少。…

[![Creght](https://ugc.talizen.com/_assets/site/2061660904709165056/1780797461299__creght_logo.png)帮助文档](/help.md)

[更新历史](/blogs.md)

[AI](/docs/ai/quick-create-first-website.md) [可视化](/docs/get-start.md)

入门

- [两分钟了解 Creght](/docs/get-start.md)
- [如何注册 Creght](/docs/signup.md)
- [快速制作网站](/docs/create-site.md)
- [模板](/docs/tpls.md)

设计

- [编辑器](/docs/editor.md)
- [基本操作](/docs/operating.md)
- [什么是布局](/docs/layout.md)
- [什么是定位](/docs/position.md)
- [什么是尺寸](/docs/size.md)
- [断点](/docs/breakpoint.md)
- [弹窗](/docs/popover.md)
- [组件](/docs/components.md)
- [添加第三方字体](/docs/tp-font.md)
- [副本与深拷贝](/docs/deep-copy.md)

CMS

- [内容管理 \- CMS](/docs/cms.md)
- [CMS 导入微信公众号文章](/docs/wxmp.md)

网站设置

- [页面设置](/docs/page-setting.md)
- [如何升级套餐](/docs/manage-plan.md)
- [SEO 设置](/docs/seo-setting.md)
- [小文件](/docs/verification-file.md)
- [绑定自定义域名](/docs/custom-domain.md)
- [如何进行网站备案](/docs/beian.md)
- [服务器节点说明](/docs/website-node.md)
- [如何切换站点](/docs/pxrp79jqtnyq.md)
- [多语言本地化](/docs/localization.md)

AI

- [关于 Creght AI](/docs/creght-ai.md)

工具

- [从 Figma 设计稿到可交互网站](/docs/figma-to-creght.md)
- [Figma 转响应式布局的 3 大核心指南](/docs/figma-autolayout.md)
- [Figma 设计稿一键转响应式网站](/docs/response-site.md)
- [Figma 转响应式网站-交互篇](/docs/figma03.md)
- [使用 FFmpeg 压缩视频](/docs/ffmpeg.md)
- [如何将 Clarity 添加到您的网站](/docs/clarity.md)
- [按钮 Hover 动效制作教程](/docs/button.md)
- [响应式导航栏制作教程](/docs/nav.md)
- [折叠面板](/docs/collapse.md)

设计/

# 添加第三方字体

Creght 内置了常用的十多款字体，但没有收录的字体也很多，如果你想使用其他字体，可以按照此手册来添加第三方字体。

目前我们支持添加 3 个来源的字体：

- [Google Fonts](https://fonts.google.com/)：众多英文字体，但中文字体很少。
- [ZeoSeven Fonts](https://fonts.zeoseven.com/)：900+款字体，众多中文字体。
- [中文网字计划](https://chinese-font.netlify.app/zh-cn/cdn/)：高质量的中文字体库。

## 如何在 Creght 中添加第三方字体

在 Creght 中选择文字元素，然后在右侧设置面板中选择 “字体” - “添加字体”，在 “添加字体” 弹窗中填入对应信息：

![image.png](https://fsu.creght.com/user/1/misLsqbDoRt__image.png)

![image.png](https://fsu.creght.com/user/1/misLssbLKRV__image.png)

Creght 需要使用下面几个信息来完成添加字体：

- CSS 链接：是一个 css 链接，如 Google Fonts 是这样的链接： [https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&display=swap](https://fonts.googleapis.com/css2?family=Liu%20Jian%20Mao%20Cao&display=swap)
- Font Family: 字体的名字，如：Liu Jian Mao Cao
- 字体权重：字体的粗细属性。当一款字体有多个字重变形的时候，可以填写多个字重就可以在 Creght 中使用这些字重了。可以不填，默认为 400。

以下是如何在各个字体库找到这些信息：

### Google Fonts

地址： [https://fonts.google.com/](https://fonts.google.com/)

1. 筛选搜索到字体之后点击字体进入字体详情页

![image.png](https://fsu.creght.com/user/1/misLstLfcZt__image.png)

1. 在详情页点击 “Get Font”

![image.png](https://fsu.creght.com/user/1/misLswEySsR__image.png)

1. 点击 Get embed code

![image.png](https://fsu.creght.com/user/1/misLsyngRUJ__image.png)

1. 复制对应的信息到 Creght 面板中

![image.png](https://fsu.creght.com/user/1/misLsAaVgEe__image.png)

在这个例子中，需要填入 Creght 的信息如下：

- CSS 链接： [https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&display=swap](https://fonts.googleapis.com/css2?family=Liu%20Jian%20Mao%20Cao&display=swap)
- Font Family: Liu Jian Mao Cao
- 字体权重：400（也可以不填，默认就是 400）。

### ZSFT（ZeoSeven Fonts）

地址： [https://fonts.zeoseven.com/browse/](https://fonts.zeoseven.com/browse/)

1. 选择一款字体，点击进入详情

![image.png](https://fsu.creght.com/user/1/misLsBSWOUO__image.png)

1. 在详情页面下方 ”嵌入字体“ \- ”常规 CSS“ 可以找到需要填入 Creght 的信息

![image.png](https://fsu.creght.com/user/1/misLsDOGIPr__image.png)

在这个例子中，需要填入 Creght 的信息如下：

- CSS 链接： [https://fontsapi.zeoseven.com/568/main/result.css](https://fontsapi.zeoseven.com/568/main/result.css)
- Font Family: Fusion Pixel 10px M zh\_hans
- 字体权重：400（也可以不填，默认就是 400）。

### 中文网字计划

地址： [https://chinese-font.netlify.app/zh-cn/cdn/](https://chinese-font.netlify.app/zh-cn/cdn/)

1. 选择一款字体，点击 ”复制 css“

![image.png](https://fsu.creght.com/user/1/misLsEXLvPr__image.png)

1. 在弹窗中找到这些信息填入 Creght

![image.png](https://fsu.creght.com/user/1/misLsGqwPcM__image.png)

在这个例子中，需要填入 Creght 的信息如下：

- CSS 链接： [https://chinese-fonts-cdn.deno.dev/packages/syst/dist/SourceHanSerifCN/result.css](https://chinese-fonts-cdn.deno.dev/packages/syst/dist/SourceHanSerifCN/result.css)
- Font Family: Source Han Serif CN VF
- 字体权重：400（也可以不填，默认就是 400）。

## 在 Creght 使用第三方字体

按照上方方法添加了第三方字体之后，就可以在 ”字体“ \- ”自定义“ 下找到您的字体，选择使用即可。

> 对于某些体积比较大的字体，可能需要在选择后等待 2-3s 才会加载完成。

![image.png](https://fsu.creght.com/user/1/misLSmFpnzd__image.png)

## 已知局限

- 如果您在上述 3 个地方都没有找到想要的字体，有可能是此款字体虽然允许使用但不允许被第三方分发，比如 MiSans、HarmonyOS Sans、阿里巴巴普惠体等（可以在官网找到他们的协议）。您可以寻找相似的字体作为替代，如果您有强烈需求要使用这类不能被分发的字体，也可以与我们联系，我们会在未来添加上传字体功能来满足此需求。

本文目录

- [如何在 Creght 中添加第三方字体](#如何在-creght-中添加第三方字体)
- [Google Fonts](#google-fonts)
- [ZSFT（ZeoSeven Fonts）](#zsft-zeoseven-fonts)
- [中文网字计划](#中文网字计划)
- [在 Creght 使用第三方字体](#在-creght-使用第三方字体)
- [已知局限](#已知局限)

![Creght](https://ugc.talizen.com/_assets/site/2061660904709165056/1780797461299__creght_logo.png)

此网站使用 [Creght](/) 创建

![微信客服](https://fsu.creght.com/site/2066727200882692096/1785119134612__image.png)

微信客服

## 链接

- [价格](/price.md)
- [解决方案](/solution.md)
- [客户案例](/customers.md)
- [帮助中心](/help.md)
- [联系我们](/contact.md)
- [更新记录 & 博客](/blogs.md)
- [退款说明](/tuikuan.md)

## 资源

- [全部资源](/resources.md)
- [模板](/templates.md)
- [组件库](https://creghtlib.site.creght.com)
- [动效库](/design/effects.md)
- [Figma to Creght](/figma2creght.md)
- [API](/api.md)

## 产品对比

- [对比上线了](/creght-vs-sxl.md)
- [对比凡科建站](/creght-vs-fkw.md)
- [自己写代码 vs Creght](/compare/self-coding.md)
- [外包 vs 自己做](/compare/outsourcing.md)

## 协议

- [用户协议](/legal/terms.md)
- [隐私政策](/legal/privacy.md)
- [可接受使用政策](/legal/acceptable-use.md)

## 社交媒体

- [小红书](https://www.xiaohongshu.com/user/profile/5a38606811be10715f4895b6)
- [哔哩哔哩](https://space.bilibili.com/513308095)

[蜀ICP备2023038192号-2](https://beian.miit.gov.cn)