
如果不想花大筆費用購買字型授權,也不想使用 Google Fonts 提供的免費字型(和其他人重複),其實網路上也有不少開發免費字型的公司團隊,但大多數仍以英文字型為主,畢竟中文字型製作難度和成本太高,即使如此,很多設計上依然會用到英文或數字字型,還是要尋找使用起來很適切且讓人印象深刻的選擇。
本文要介紹的「Fontshare」是 Indian Type Foundry(印度字型製造所)提供的免費字型服務,是一個還在持續成長中的專業字型集合,收錄可 100% 免費使用於個人或商業用途的高品質字型。網站開放 Fontshare API 讓使用者直接嵌入網頁做為網頁字型使用,亦可下載原始字型檔案。
依照說明,這些年 ITF 一直為學生、設計組織和非營利組織提供商業字型,2014 至 2016 年間發布過一些開放原始碼字型,也投入很大一部份資源去開發用於稀有或瀕臨滅絕的語言字型,儘管這些字型無法帶來商業上的利益。
從 Fontshare 可以找到 50 種免費英文字型,透過搜尋、篩選器瀏覽,調整不同的預覽字型變化,包括要顯示的文字、大小和對齊方式,也能線上查看完整字元表。如果需要比較獨特、不容易和其他人重複的免費字型可到這個網站找找,當然,它們不會因為免費而犧牲品質。
Fontshare
https://www.fontshare.com/
使用教學
STEP 1
開啟 Fontshare 網站後點選上方「Fonts」瀏覽免費字型列表,Fontshare 網站排版很易於操作,每個字型都會有一段不同文字的預覽(預設情況是使用城市名稱做為測試文字)。

STEP 2
左上角是搜尋功能,輸入字型關鍵字或依照字型類別篩選顯示,在下方輸入測試文字會直接套用到 Fontshare 以不同字型呈現。

右上角可調整測試預覽的文字大小,切換以城市名、摘要或字型名稱做為範例。

STEP 3
使用者也能單獨預覽字型,從上方選單調整樣式、字重(Font weight)和文字大小,會標示擁有幾種樣式、設計者,點選中間的文字直接修改編輯要測試的文字內容。

如果列表呈現方式不易於瀏覽或比較字型,亦可切換為網格模式(Grid view)。

STEP 4
進入字型的詳細資訊頁面,點選右上角「Download Family」就能下載字型包。

其中有些字型是有不同的樣式(Style),除了在頁面直接預覽、測試文字效果,點選右上角「+ Add Style」可以將某個樣式加入列表,稍後透過 Fontshare API 產生嵌入網頁的字型鏈結。

STEP 5
每個字型會有「Glyphs」讓使用者查看不同字元的呈現樣式。

或是直接在線上測試、預覽文字,調整大小或行高,還能切換對齊方式、顏色並顯示出某個字型的特徵。

STEP 6
點選字型頁面右上角「Download Family」後再按一次按鈕就能下載字型檔,下載時也代表你同意 Fontshare 使用者授權條款。

STEP 7
如果你點選「Add Style」將特定字型加入列表,一樣從右上角可開啟檢視功能,列表會顯示你已選取、加入的字型名稱及樣式。

點選「Use Code」就能產生 Fontshare API 提供的 HTML 程式碼,將一段 CSS 語法加入網頁後從樣式表設定要使用的字型名稱可以載入網頁字型,如果你想讓載入速度更快,也可點選「Download Fonts」將相關字型檔下載後自行託管檔案(當然路徑方面需要稍作修改才行)。

值得一試的三個理由:
- 由印度字型製造所提供的免費英文字型,目前一共有 50 種左右
- 100% 免費使用於個人或商業用途,無需標示出處來源
- 可透過 Fontshare API 產生網頁字型鏈結,或將字型檔下載託管