2 大網路字型的抉擇,從 Google Fonts 轉換至 Adobe Fonts,探究背最實際的選擇原因

在進入網路世界之前,我對於字型是有看沒有懂,進入網路跟設計世界後,Google Fonts 跟 Adobe Fonts 這兩款網路字型對我而言也差不多,能簡單處理才是王道。

一直等到自家網站的字型發生問題後,才開始正視網站上字型呈現的這件事情,當時的字型問題並不難解決,但難得的是因為這次事件所產生出來的後續討論,是我覺得很珍貴的部分,也因為後續的討論讓讓我深刻明白這兩者間的差異。

這時候就不得不慶幸自己幸好有舉辦 WordPress 台南小聚,如果沒有小聚就不會知道這麼多學到這些事情了。

起因-日文漢字無法顯示導致的缺字

這個問題最初來自於,我從 Avada 搬家到 OceanWP,當時為了讓字體好看,選擇使用 Google Fonts,原因很單純,不需要太多調整,不用擔心訪客的瀏覽器無法支援,且又是免費版,除了不確定中國那端的訪客是否能看到外,Google Fonts 沒有甚麼好挑剔的。

後來發現最麻煩的問題出在我身上,由於部分文章跟選單用字會使用到日文漢字,偏偏 Google Fonts 不支援,發生了缺字問題,解決方法不難,直接釜底抽薪不用日文漢字即可,只是如果可以還是想使用日文漢字,畢竟注音輸入法都可以打出來。

之後就引發了一些討論,以及阿力獅的救援教學,這才明白同樣是 Google Fonts,明體跟黑體支援的字數還是有所不同,雖然明體無法支援日文漢字,不過黑體可以,因此只要換成黑體,我的網站問題就迎刃而解,本來以為話題到這邊就暫告一個段落了。

當下發生缺字時的留言對話
關於字型的討論

但沒想到這個問題引發 WordPress 台南小聚的固定參與夥伴-Richer的注意,意外衍伸了後續更深入的探究討論。

關鍵-情感最終左右了網路字型選擇

Google Fonts 的缺字問題,引起了小聚中的開發者兼工程師-Richer 的注意,而後他就去把 Google Fonts 的字型研究了下,最後產生了這篇文章-網路字型中對於中文字型的處理,但說實話,文章一出來時我還真看不懂。後來幸好在小聚時,Richer 非常大方的跟小聚活動參與的夥伴們分享他的心得,才終於明白為什麼他會下「以 google 上面的提供的字型檔來說, TC 真的是品質最差的一個」這個結論。

這個結論要先從說起,現在網路的字型呈現是先將龐大的字型檔案,切割成數十數百個檔案,每一個檔案內有會一定數量的字,運作時先下載第一款字型檔案,若沒有需要的字,那就繼續下載下一個字型檔案,若是再沒有,那就繼續下載到有為止,這樣子的好處在於避免訪客進入網站時載入了許多根本用不到的字型,進而拖累速度。

如上面所言,系統會一直抓取到相符合的字為止,若真得抓取不到,就會跑去抓取其他家族的字型檔案,這時候呈現在網路前端,就會是出現兩種不同字體的狀況,這就是所謂的缺字,而這種情況最容易出現繁體中文之中,因為繁體中文的字庫最少。

網路字型缺字的示意圖
網路字型缺字的示意圖

這就是為什麼「TC 真的是品質最差的一個」的主要原因,相較於簡體中文、日文漢字、韓文漢字而言,繁體中文所造的字型數量遠不及簡字中文,導致使用繁體中文相較於簡體中文容易出現缺字,就算不用日文漢字,而是用中文冷僻字,也有可能出現缺字問題。

解法也很簡單,那就是去設語法指定字型順序,以我的狀況來講,會需要使用到日文漢字,又不想出現缺字的話,我的指定順序應該要這樣設定:

日文漢字=>簡體中文=>韓文漢字=>繁體中文

只要調整下順序,問題就解決了,然我的情感上無法接受繁體中文必須擺在最後面,得知唯一的解法只能這樣子設定後,連想都不用想立即決定放棄 Google Fonts,改用 Adobe Fonts

重點-字體品質與中文市場的包容性

之所以會那麼快決定,放棄 Google Fonts 轉身投入Adobe Fonts,除了因為情感因素之外,實際面部分就是在字體品質上。

Adobe Fonts 跟 Google Fonts 雖系出同源,但 Adobe Fonts 持續有在修正繁體中文字體,經過多年的發展,就算是基本的明體跟黑體,也開始和 Google Fonts 有所差異,而且 Adobe 本來就有雄厚的設計資本,自然在很多細微處都比 Google Fonts 漂亮一點。

最後就是 Adobe Fonts 的免費版已經不依據流量計費了,之前免費版的 Adobe Fonts 會依照流量算錢,而現在只有使用指定字型才會算錢,對一般網站而言,Adobe Fonts 所提供免費版字型已經多到讓人頭昏腦脹了,除非有特殊需求,不然一般的就很夠用。

Astra 的付費版有支援 Adobe 專案,只要輸入專案號碼即可,而 OceanWP 則需要將程式碼放到「外觀」=>「自訂」當中,就能在前端發揮效果,而程式碼如下,感謝阿力獅教室的提供。

// This function can import Adobe Fonts to WordPress site.
function alexlion_import_adobe_fonts() { ?>
<!-- Import Adobe Fonts to This Site -->
<script>
  (function(d) {
    var config = {
      kitId: '這邊輸入Adobe專案編號',
      scriptTimeout: 3000,
      async: true
    },
    h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
  })(document);
</script>
<?php
}
add_action( 'wp_head', 'alexlion_import_adobe_fonts' );

結語-Adobn Fonts 讓訪客體驗好感上升

之前就隱隱約約知道 Adobe Fonts 以網站長遠經營來講會是比較好的選擇,但就是設定使用上比較麻煩,就遲遲沒有去研究它,直到確定若是想用 Google Fonts,就得接受繁體中文放在最後面的現實後,毫不猶豫的立即改用 Adobe Fonts。

另一方面會立即下定決心的關鍵是不想使用指定模式,一般來講使用指定本機字型指定的方式,只適用於電腦版,對於使用行動裝置的訪客是無效,使用字型指定方式注定難以圓滿,因此就算我真得按照簡字中文在前的排序去指定,也難保不會在某些人的行動裝置中會失效。

而字型本來就是網站版面配置最重要的元素之一,選擇更安全更好看的字體,也是提升使用者好感的方法之一,而在 Google 在 2021 年三月後將「行動優先索引」作為搜索引擎排名的依據,也就是電腦版會被捨棄,未來行動裝置使用者的體驗感受將會越來越重要。因此不管是在現實層面、情感層面跟經營層面上來講,Adobe Fonts 遠比 Google Fonts 更適合我,雖然比較麻煩一點,但以長遠來看是值得花時間去重新調整的。

字型相關文章:

相關文章推薦:

返回頂端