# 上傳自定義字體

您可以直接從樣式面板的字體下拉選單中添加更多字體到您的項目中。選擇添加字體，我們會帶您到您的項目設置>字體設置。在那裡您可以上傳並在任何項目中使用您自己的自定義字體。

如果您想使用的字體是通過Adobe字體（Typekit）或Google字體提供的，您可以通過項目設置>字體中的集成來添加它們。\
您不需要一個付費計劃來上傳自定義字體。

本文會提到：

1. 上傳自定義字體
2. 選擇正確的字體格式
3. 編輯已安裝的字體
4. 定義後備字體
5. 上傳自定義字體

## 上傳自定義字體

如果您想在一個項目中使用自定義字體，請到項目設置>字體>自定義字體，並上傳字體文件。

![](/files/2G635cBi0jD7OILQwjru)

**重要提示**\
請閱讀您的字體許可協議，並在上傳字體之前確保您有權限在您的網站上使用該字體。

## 選擇正確的字體格式

您可以在您的Webflow項目中上傳各種字體文件格式。

**注意**\
您能夠上傳的每個字體文件的最大文件大小為2MB

被大多數瀏覽器所支持\
• WOFF - 網絡開放字體格式\
• TTF/OTF - TrueType字體和OpenType字體

少數瀏覽器支持\
• WOFF 2.0 - 網絡開放字體格式\
• EOT - 嵌入式OpenType\
• SVG - SVG字體

**注意**\
您不需要上傳每一種文件格式。您可以上傳一些不同的格式以涵蓋最大的瀏覽器支持。WOFF是一種良好的格式，具有最大的瀏覽器兼容性和良好的文件大小。如果您的字體文件沒有WOFF或WOFF2版本，您可以使用網上的字體轉換器。

## 編輯已安裝的字體

字體文件上傳後，您可以編輯字體名稱、字體重量和字體樣式。

**最佳做法**\
您可以上傳一個字體的多個實例，並為每個實例選擇不同的字體重量和樣式。只要確保在同一字體的所有實例中使用相同的字體。這將確保字體家族在設計器中被正確地歸為一組。

一旦字體家族名稱正確並匹配起來，您就可以將每個字體文件上傳到您的項目中。一旦您重新打開設計器，您就可以在設計器中看到上傳的字體。

![](/files/HkGE3QjLW8Grj8ToXudb)

![](/files/t0PvUjlu7vlZqspzwBzf)

您可以隨時編輯您的自定義字體設置，也可以刪除上傳的字體。

![](/files/VWDwww5hxhbUUF1JqYW1)

## 定義後備字體

後備字體確保瀏覽器和操作系統之間的最大兼容性。如果用戶的瀏覽器無法加載您的自定義字體，它會切換到後備字體。後備字體是為您上傳的每個字體自動創建的。

![](/files/Kep6x301s1iE6yWeMtkN)

您可以編輯每個字體的後備字體，並從可用字體列表中選擇它的後備字體。

![](/files/iJbtdIaSzFE8t0tLfSOj)

您可以編輯字體顯示設置，它決定了如何根據瀏覽器已經保存的內容來加載字體面孔。

![](/files/5iMwVozdReIzo4Zzu4Af)

**最佳做法**\
將字體顯示設置為交換，可以透過使用系統字體來防止頁面加載時出現看不見的文字閃光。

## 在設計器中測試字體

在設計器中，您可以完全訪問您的任何自定義字體和字體重量。只要在樣式面板(S)>排版部分瀏覽您需要的字體。字體列表是按字母順序排列的。

您可以將您的自定義字體應用於任何文本元素、任何父元素或任何HTML標簽，以影響所有段落或所有H1。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.tenten.co/docs-webflow/webflow-101/8-xiang-mu-she-ding/shang-chuan-zi-ding-yi-zi-ti.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.