如何在Shopify 主題包中使用額外的字型

Shopify本身具有webfont字型庫，可以在所有的Shopify商店中免費使用，我們也可以在主題包裡面引用Google 字體。若是還不夠用，也可以選擇上傳字型。這篇文章就要跟大家分享如何上傳字型並將字型添加到主題包中。

從這篇文章你會知道：

如何上傳自訂字型檔
如何套用自訂字型

如何上傳自訂字型檔

一、上傳字型到主題包中

登入Shopify後台、選擇 Sales channels > Online Store > Themes，在右邊主題包清單中，選擇你要添加字體的主題包，點擊 “…"按鈕之後，於彈出的清單之中選擇Edit Code。

進到主題包編輯頁面之後，在左邊的列表中、找尋Assets，點擊Assets裡的 “+ Add a new asset"

接著上傳你的字型檔

如果你的字型檔是otf檔，會出現底下的錯誤訊息：

解決方法就是進行轉檔。Google 搜尋 “web font converter"或是"Webfont Generator"，就可以找到一堆免費的工具。轉檔之後的格式通常為woff或woff2。

接著再次上傳字型檔，這次就上傳成功了。

如何套用自訂字型

一、在主題包裡添加字型檔

接著開啟你的css檔案，添加字型檔。通常是在Assets裡的 *.css, 或是 *.css.liquid
在CSS檔案裡加上

@font-face {
    font-family: '字型名稱';
    src: url('檔案名稱.woff') format('woff');
}

因為CSS檔案和字型檔都同在Assets裡，所以url直接寫上字型檔檔名就可以了

二、將字型上傳到 Content > Files 裡

另外你也可以把檔案上傳到 Content > Files 裡了，上傳之後點擊右側的連結圖示，就可以把字型檔的連結位置複製到剪貼簿裡。接著改寫剛剛的@font-face，將剛剛的檔案名稱直接換成剛剛複製來下的檔案連結位置。

@font-face {
    font-family: '字型名稱';
    src: url('檔案連結位置') format('檔案格式');
}

如果是上傳到Content> Files裡，可以直接上傳otf檔，不需要再經過轉檔，同時@font-face的寫法調整如下：

@font-face {
    font-family: '字型名稱';
    src: url('檔案連結位置') format('opentype'); 
}

不管是上傳到主題包的Assets或是Content > Files裡，都可以正常使用，達成我們使用自訂字型的目的。

三、開始撰寫CSS檔案

現在你已經可以套用剛剛上傳的字型了哦

body {
    font-family: '字型名稱';
}

以上就是歐斯瑞本次『如何在Shopify 主題包中使用額外的字型』的分享
記得訂閱歐斯瑞的電子報、追蹤臉書粉絲團及IG，收到更多相關實用資訊！也歡迎與我們聯繫。

〖參考資料來源〗：https://shopify.dev/docs/themes/architecture/settings/fonts#custom-fonts

前端開發, Shopify

如何在Shopify 主題包中使用額外的字型