在網頁上使用 Open 粉圓字型的方法－旅行的記憶

在網頁上使用 Open 粉圓字型的方法 -

「Open 粉圓字型」是由 justfont 提供的開放字型。

不像 Google Fonts 可以直接用 html code 有 CDN 可以用，需要找個空間自己放字型然後在 css 指定才能使用，記錄一下做法。

首先把 Open 粉圓字型從下載連結下載下來，是個 ttf 檔案；再丟到網站上，記下路徑。

接下來在 css 中指定這個字型的名字和路徑

  
@font-face {
  font-family: 'jf-openhuninn';
  src: local('jf-openhuninn'),
       url('https://example.com/fonts/jf-openhuninn-2.1.ttf') format('truetype');
}

其中 font-family 用來宣告在 css 要使用的名稱，然後 src 指定來源。 url 的部份因為我放在和專案不同域名底下，因此用了絕對路徑，MDN 的範例則是用相對路徑；加上 local 的名稱，指定已經有這套字型的人不用再額外下載一次字型。

接下來在 css 需要使用這個自訂字型的地方指定在 @font-face 裡的名字，例如
.sample { font-family: 'jf-openhuninn', 'Noto Sans TC', '微軟正黑體', 'PingFang TC', serif; }
然後在 html 裡加上對應的 class ，就可以檢視結果是否如預期了。