先確認：Figma 字型設定到底是在設定什麼？
做 figma字型設定時，核心是管理字族、字級、字重、行高、字距與 Text Styles，讓畫面規格在設計、品牌與前端交付之間保持一致。
字型、字級、字重、行高、字距差在哪裡
Figma 的文字設定都集中在右側 Typography 區塊，但每個欄位負責的問題不同。新手最常卡住的地方，是把「換字型」和「調整字級」混在一起看。
| 項目 | Figma 對應欄位 | 主要影響 |
|---|---|---|
| 字型 | font family | 使用哪一套字型，例如 Noto Sans TC 或品牌字型 |
| 字級 | font size | 文字大小與版面層級 |
| 字重 | font weight | Regular、Medium、Bold 等粗細樣式 |
| 行高 | line height | 多行文字的閱讀距離與元件高度 |
| 字距 | letter spacing | 字與字之間的間距，常影響標題精緻度 |
Figma 不是 Word：字型設定要服務 UI 規格與交付
在 Figma 裡換字型，不只是在畫面上看起來好看。設計稿後面通常會進入品牌審核、前端切版、廣告素材延伸，所以字型設定要能被重複套用，也要能被工程端讀懂。
實務上，我會把常用標題、內文、註解先整理成 Text Styles。逐層手動改字型很快，但案子一大，就會變成最難追的錯誤來源。
在電腦安裝自訂字型：Figma 能讀到哪些字型檔？
Figma 自訂字型要先安裝到電腦系統，常見可用格式是 .ttf 與 .otf；只把字型檔放在資料夾裡，Figma 通常讀不到。
下載後先檢查 .ttf 或 .otf
下載字型後，先解壓縮 zip 檔，再確認裡面是否有 .ttf 或 .otf。依 Figma 官方字型文件，自訂字型需要先安裝到電腦，Figma 才能在字型選單中讀取。
- 下載字型檔並解壓縮。
- 確認有
.ttf或.otf檔案。 - 逐一檢查 Regular、Medium、Bold、Heavy 等樣式是否各自存在。
- 安裝到作業系統的字型管理工具。
- 重新載入 Figma 檔案，或重開 Figma 桌面 App。
Windows 與 Mac 安裝位置
| 系統 | 安裝方式 | 檢查重點 |
|---|---|---|
| Mac | 用 Font Book 開啟並安裝字型 | 確認字型沒有停用，也沒有重複版本衝突 |
| Windows | 在字型檔上按右鍵安裝，或放入 Windows Fonts | 確認安裝在目前使用者可讀取的位置 |
為什麼只裝 Regular，Figma 可能沒有 Bold
很多品牌字型會把 Regular、Bold、Heavy 拆成不同檔案。你只安裝 Regular，Figma 可能只能選 Regular，無法在 font weight 裡選到 Bold。
這件事在中文字型更常見，因為中文字集龐大，不同字重通常是獨立檔案。設計稿真正容易出錯的地方，往往不是「找不到字型」，而是只找到家族名，卻缺了要用的樣式。
不展開字型授權法律細節
字型授權會影響商業使用、網站嵌入與客戶交付，但這裡只處理 Figma 安裝與使用流程。品牌案建議把字型來源、授權範圍與設計規格一起寫進 品牌規範手冊，避免後續交接時只剩檔名。
網頁版、桌面版差在哪：什麼時候需要 Figma Font Installer？
用瀏覽器開 Figma 並要讀取本機自訂字型時，需要 Font Installer；使用桌面版 Figma 時，通常已內建本機字型支援，重開 App 後再確認即可。
用瀏覽器開 Figma：需要安裝 Font Installer
Figma 網頁版無法直接讀取你電腦裡所有本機字型，所以需要安裝 Font Installer。安裝後，它會在背景協助瀏覽器版 Figma 讀取本機字型。
用桌面版 Figma：通常重開 App 即可
桌面版 Figma 已內建本機字型支援。字型剛安裝完還沒出現時，先關掉 Figma 桌面 App 再重新開啟，比反覆重裝字型更有效。
| 使用情境 | 是否需要 Font Installer | 處理方式 |
|---|---|---|
| 瀏覽器版 Figma，要用本機自訂字型 | 需要 | 安裝 Font Installer，確認 FigmaAgent 正常執行 |
| 桌面版 Figma，要用本機自訂字型 | 通常不需要 | 安裝字型後重開 App |
| 只使用 Figma 預設可用字型 | 不一定需要 | 直接從 Font menu 選字型 |
| ChromeOS 或 Linux 使用者 | 本機字型支援受限 | 優先確認 Figma 官方支援狀態與可用字型來源 |
Font Installer 沒有介面，背景程序名稱是 FigmaAgent
Font Installer 安裝後通常不會跳出一個可操作的視窗。它的背景程序名稱是 FigmaAgent，所以排錯時要找的是背景程序是否存在，而不是尋找一個設定面板。
安裝後重新載入檔案或重開 App
安裝 Font Installer 後，先重新載入瀏覽器中的 Figma 檔案。若使用桌面版，則重開 App；如果仍讀不到，再依 Figma Font Installer 排錯文件檢查 FigmaAgent。
在 Figma 裡套用自訂字型：從 Font menu 找到 Installed by you
套用 Figma 自訂字型的流程是選取文字圖層，打開右側 Typography 的 Font menu，用 Installed by you 篩選，再選擇正確字型與樣式。
選取文字圖層後看右側 Typography
先點選文字圖層，右側屬性面板會出現 Typography。這裡可以調整 font family、font weight、font size、line height 與 letter spacing。
- 選取要修改的文字圖層。
- 在右側 Typography 打開 Font menu。
- 搜尋字型名稱，或切到 Installed by you。
- 選擇字型家族與對應 style。
用 Installed by you 篩選自己安裝的字型
Font menu 裡的字型很多，直接搜尋不一定最快。若你剛安裝的是本機字型，先用 Installed by you 篩選，通常能更快排除 Google Fonts、Apple fonts 或其他預設來源。
中文字型名稱可能和下載頁名稱不同
中文字型常有家族名、檔名、顯示名稱不完全一致的情況。例如下載頁寫「思源黑體」，Font menu 裡可能以 Noto Sans CJK 或其他家族名稱出現。
先搜尋英文家族名，再搜尋中文名稱
找不到中文字型時，不要只查中文名稱。先查英文家族名，再查中文名稱，最後回到系統字型管理工具確認該字型是否真的已安裝。
自訂字型套用後，哪些參數一定要一起檢查？
換上自訂字型後，要一起檢查字族、字重、字級、行高、字距與 paragraph spacing；只換 font family，版面仍可能跑掉。
字重不是按粗體硬加粗，而是看字型檔支援
Figma 的 font weight 取決於字型本身是否提供對應樣式。若品牌字型沒有 Bold 檔案，按粗體或硬選字重，可能只會得到不穩定的顯示結果。
行高 Auto 不一定錯，壓太低才會出問題
Auto line height 在早期草稿並不一定有問題，但正式交付前要確認多行文字不會互相擠壓。尤其是繁體中文標點、英文混排、數字與按鈕文字，行高太低會讓元件看起來沒有呼吸空間。
中文字型通常不需要過度增加字距
英文字母在標題裡常會調整 letter spacing，但中文字型本身已經是方塊節奏。繁體中文若過度拉開字距，常會讓閱讀變慢，品牌感也不一定更高級。
| 參數 | 該看哪裡 | 常見錯誤 | 交付影響 |
|---|---|---|---|
| font family | Font menu | 只換單一圖層，沒有同步 Text Styles | 頁面不同區塊字型不一致 |
| font weight | weight/style 欄位 | 以為 Bold 一定存在 | 前端找不到相同字重 |
| font size | size 欄位 | 標題層級沒有規則 | RWD 時比例難維護 |
| line height | line height 欄位 | 中文段落壓太緊 | 可讀性下降，元件高度不同 |
| letter spacing | letter spacing 欄位 | 中文字距套用英文邏輯 | 品牌視覺變鬆散 |
色彩、填色、特效不放進字型設定主段落
文字色彩、漸層、陰影與特效會影響視覺，但它們不屬於這裡的字型設定主線。品牌一致性要另外管理，可和 品牌形象一致性 的規範一起處理。
台灣繁中字型情境：中文字型、字重與 fallback 怎麼處理？
台灣繁中字型要同時確認字集、標點、字重與 fallback stack；「中文能顯示」不代表 Regular、Medium、Bold 都能穩定交付。
確認中文字集與標點符號是否完整
繁體中文設計稿要檢查常用中文字、全形標點、括號、頓號、貨幣符號與中英混排。品牌首頁看起來正常，不代表表單錯誤訊息、FAQ 或長文段落都會正常。
確認 Regular、Medium、Bold 是否真的存在
Noto Sans TC、PingFang TC、微軟正黑體等字型在不同系統與環境中的可用樣式不完全相同。做品牌設計時，我會把「可用字重」列成規格，而不是只在畫面上看起來接近。
設計稿與前端 fallback stack 要先講好
例如台灣品牌網站使用自訂品牌字型做標題，內文使用 Noto Sans TC。若前端沒有相同字型檔，就要提前寫好 fallback stack，避免客戶開發環境一換，字寬、斷行與按鈕高度全部改變。
| 檢查項目 | 設計端要確認 | 前端要拿到 |
|---|---|---|
| 繁中字集 | 常用字、品牌詞、標點是否完整 | 支援繁體中文的字型檔或系統字型 |
| 字重 | Regular、Medium、Bold 是否存在 | 對應的 font-weight 數值或樣式名稱 |
| fallback | 主要字型失效時的視覺落差 | 清楚的 font-family stack |
| 品牌延伸 | 廣告、簡報、網站是否共用同一套規格 | 可查的 Text Styles 或 typography token |
範例：Noto Sans TC, PingFang TC, Microsoft JhengHei, sans-serif
常見 fallback stack 可以寫成 "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif。若品牌還需要英文標題字型，可把字型選擇放到 英文字型靈感 或 常用英文字型整理 這類輔助頁，不要讓主規格變成推薦清單。
團隊共用與交付：為什麼別人打開會缺字型？
別人打開 Figma 檔案會缺字型，通常是對方沒有同一套字型、缺少同一個字重，或安裝了不同版本；這不是單一檔案壞掉。
對方沒有安裝同一套字型
Figma 檔案不會因為你使用本機字型，就自動把字型同步到所有協作者電腦。對方若沒有安裝同一套字型，就可能看到 missing font 提醒。
對方缺少同一個字重或樣式
有時協作者已安裝同一個字型家族，但少了 Medium、SemiBold 或 Italic。畫面可能看似只差一點，但在按鈕寬度、卡片高度、換行位置上會很明顯。
同名字型版本不同，文字可能位移或格式改變
同名字型也可能有版本差異。Figma 官方有針對 conflicting fonts 說明，版本衝突可能造成文字度量不同，進而讓版面位移。
| 排查順序 | 問題 | 判斷方式 | 處理方式 |
|---|---|---|---|
| 1 | 對方沒有字型 | 看到 missing font alert | 提供合法字型來源或改用 shared fonts |
| 2 | 缺少字重 | 特定樣式無法選取 | 補安裝相同 weight/style 檔案 |
| 3 | 版本不同 | 同字型但寬度、行高不同 | 統一版本，移除衝突字型 |
| 4 | 樣式沒有集中管理 | 每個頁面文字設定不同 | 建立 Text Styles 並同步更新 |
Organization / Enterprise 可用 shared fonts 降低缺字風險
團隊規模變大時，shared fonts 或 uploaded fonts 會比逐一請同事安裝更可控。這種做法適合品牌字型固定、協作者多、設計系統已經成形的團隊。
不展開 Figma 方案價格
方案權限會隨 Figma 調整，這裡只抓工作流原則：團隊要共用字型來源、共用字重版本，並把 Typography 規格集中在 Text Styles 或設計系統文件中。
從 Figma 到前端：字型設定如何對應 CSS？
Figma Typography 可以對應到 CSS 的 font-family、font-size、font-weight、line-height 與 letter-spacing，交付時要連同 fallback 一起給。
Figma 欄位對應 CSS property
工程端通常會從 Dev Mode 查看文字屬性。依 Figma 文字屬性文件，Typography 面板與 Dev Mode 都能協助讀取文字相關設定。
| Figma 欄位 | CSS property | 交付提醒 |
|---|---|---|
| Font family | font-family |
不要只給單一名稱，品牌字型要附 fallback stack |
| Font size | font-size |
確認桌機與手機是否有不同級距 |
| Font weight | font-weight |
最好給數值，例如 400、500、700 |
| Line height | line-height |
確認是 px、百分比或 normal 邏輯 |
| Letter spacing | letter-spacing |
注意 Figma 顯示單位與 CSS 實作單位 |
line-height 不只看數字，也要看單位
Figma 裡的 line-height 可能以 px 或百分比呈現。工程端若只抄數字，沒有確認單位，長文段落、卡片摘要與按鈕文字都可能和設計稿不同。
品牌字型要交付 fallback stack
只寫 font-family: BrandFont; 對工程端不夠。穩定的交付會包含主要字型、繁中 fallback、系統字型與通用字族，例如 "BrandFont", "Noto Sans TC", "PingFang TC", sans-serif。
不寫 webfont preload、font-display 深度教學
@font-face、preload、font-display 與效能優化屬於前端字型載入議題。這裡只處理 Figma 字型設定如何轉成可交付的 CSS 規格。
進階：可變字型、字重變數與批量修改怎麼放進文章？
可變字型適合需要細緻控制 weight、width、optical size 或 slant 的設計系統；批量修改則應先改 Text Styles，再同步到使用它的文字層。
可變字型會出現 Variable tab
若字型本身支援 variable fonts，Figma 會提供 Variable tab 讓你調整可用軸線。常見軸線包含 weight、width、optical size 與 slant，但實際選項仍以字型檔支援為準。
字重變數應使用數值邏輯，不要用字串硬配
可變字型的 weight 更適合用 400、500、700 這種數值邏輯管理。只用 Regular、Bold 這類字串名稱，很容易在設計端和前端之間失去對應關係。
批量修改優先改 Text Styles，而不是逐層手動改
大量文字要換字型時，先看它們是否套用了 Text Styles。若有，更新 Text Styles 會比逐層選取更穩，也能降低漏改的機率。
不列一長串批量修改外掛
外掛可以加速局部工作，但不該成為字型治理的主解法。設計系統裡真正能長期維護的，還是清楚的 Text Styles、命名規則與字型來源。
Figma 字型找不到、不能加粗、顯示不一樣：快速排錯清單
Figma 找不到字型時，先確認本機是否已安裝字型、網頁版是否有 Font Installer、FigmaAgent 是否執行，再檢查字重檔案與版本衝突。
找不到本機字型
先回到系統字型管理工具確認字型已安裝，而不是只存在下載資料夾。瀏覽器版使用者要再確認 Font Installer 與 FigmaAgent。
中文字沒有變粗
中文字沒有變粗時，常見原因是該字型沒有對應的 Bold 或 Medium 檔案。硬套粗體可能讓畫面看似變粗，但前端不一定能重現。
團隊成員打開後缺字
依 Figma 的 missing font alert 說明，協作者若沒有相同字型或樣式，就需要補安裝、替換字型，或使用團隊可共用的字型管理方式。
文字位移或行高變怪
文字位移通常和字型版本、字重替代、line-height 單位或 fallback 有關。品牌稿交付前，我會用幾個最容易出錯的畫面檢查：導覽列、按鈕、表單、長標題與多行內文。
| 症狀 | 可能原因 | 處理方式 |
|---|---|---|
| Font menu 找不到字型 | 字型未安裝到系統，或瀏覽器版沒有 Font Installer | 安裝字型，瀏覽器版再安裝 Font Installer 並重載檔案 |
| Installed by you 看不到新字型 | Figma 尚未重新讀取字型清單 | 重新載入檔案或重開桌面 App |
| 字重不能選 | 缺少對應 weight/style 檔案 | 補安裝 Regular、Medium、Bold 等完整樣式 |
| 中文字沒有變粗 | 中文字型不支援該字重 | 改用有完整繁中字重的字型，或調整設計規格 |
| 協作者看到缺字型 | 對方未安裝同字型、同樣式或同版本 | 統一字型來源，必要時使用 shared fonts |
| 文字寬度或行高不一致 | 字型版本不同、fallback 不同或 CSS 單位不同 | 統一版本，交付 CSS 對照與 fallback stack |
先重開 Figma，再檢查字型檔與 FigmaAgent
排錯順序要保持單純：先重開 Figma，再確認字型檔格式與樣式，最後檢查 FigmaAgent。若一開始就重裝很多套字型，反而更容易製造版本衝突。
Figma 找不到本機字型怎麼辦？
先確認字型已安裝到 Mac Font Book 或 Windows Fonts，而不是只放在下載資料夾。若使用瀏覽器版 Figma，還要安裝 Font Installer，並重新載入檔案；若使用桌面版，先重開 App 再看 Font menu。
Figma 網頁版一定要裝 Font Installer 嗎？
如果要在網頁版 Figma 使用電腦裡的本機自訂字型，就需要 Font Installer。只使用 Figma 預設可用字型時，不一定需要安裝。
Figma 桌面版要另外裝 Font Helper 嗎？
多數情況不用。Figma 桌面版通常已內建本機字型支援，字型剛安裝完還沒出現時，先重開桌面 App，再檢查字型是否在 Font menu 裡。
為什麼 Figma 字重不能選？
最常見原因是你沒有安裝對應的 weight 或 style 檔案。很多字型會把 Regular、Medium、Bold、Heavy 分成不同檔案，只裝 Regular 時，Figma 不一定能選 Bold。
為什麼中文字沒有變粗？
中文字型需要支援該字重，才會有穩定的粗細變化。若字型沒有 Bold 或 Medium，按粗體不一定能得到可交付的效果，前端也可能無法重現。
Figma 可以用 Noto Sans TC 或微軟正黑體嗎？
可以。Noto Sans TC、PingFang TC、微軟正黑體都是台灣繁中設計常見選項，但要注意不同系統的可用性、字重差異與 fallback stack，商業案也要確認授權範圍。
別人打開我的 Figma 檔案為什麼缺字型？
因為對方電腦或團隊環境沒有同一套字型、同一個樣式，或安裝了不同版本。解法是統一字型來源與版本，必要時使用 shared fonts 或 uploaded fonts 管理。
Text Styles 和字型設定差在哪？
字型設定是單一文字層的屬性，例如 font family、size、weight、line-height。Text Styles 則是可重複套用的 typography 規格，適合管理標題、內文、按鈕與註解。
Figma 字型設定怎麼交給前端？
把 Figma Typography 對應到 CSS：font-family、font-size、font-weight、line-height、letter-spacing。品牌字型還要附 fallback stack，避免開發環境缺字。
Figma 如何調整字體大小？
選取文字圖層後，在右側 Typography 的 font size 欄位調整數值即可。這屬於文字大小設定，和自訂字型安裝、Font Installer、缺字排錯是不同問題。
Figma 怎麼編輯文字？
可以雙擊文字圖層直接編輯，或按 T 新增文字。若問題是找不到自訂字型，仍要回到系統安裝、Font menu 與 Installed by you 檢查。
Figma AI 可以用中文嗎？
這題不屬於 Figma 字型設定主線。字型問題應先處理本機安裝、Font Installer、中文字重、missing font 與 CSS 交付；Figma AI 中文支援可另外查官方功能文件。