Google Fonts 的加速方式

這邊講的是透過 css (以及 js) 使用的 Google Fonts,作者想要改善這塊,加速網頁的速度:「Should you self-host Google Fonts?」。

作者第一個提到的技巧是個懶人技巧,只要加上 preconnect 預先把 HTTPS 連線建好,就可以提昇不少速度。因為這可以降低先取得 css 後才建立連線的速度差異:

<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">

作者有提到 Google 在 css 檔案的
header 裡面本來就有加上 preconnect,但從前後比較可以看出,整個網頁的結束時間差了一秒 (這是作者在 Google Chrome 的 3G Slow 設定下模擬的):

另外一個技巧是增加 swap,讓 Google Fonts 還沒有讀進來之前先用系統有的字型呈現。這樣不會出現整頁只有圖,然後突然字都冒出來的情況,也就是把一般在用的:

<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

加上 &display=swap

<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">

最後一招就是把字型放在自己家,差異就更大了:

另外一個好處是改善 privacy,不過好像沒特別提到...

90 年代的網站...

前天看到的「Only 90s Web Developers Remember This」文章裡面在懷舊 (?):

  • 1x1.gif
  • &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  • Dotted underlines, border effects
  • DHTML
  • Pixel fonts
  • Buttons

然後在 Facebook 上看到 zonble 貼的:「DHTMLConf」,太讚了 XDDD

讓人懷念的東西... XDDD

把 Powerline 用到的字型包成 ppa...

其實就是在 Ubuntu 下塞兩個檔案進系統而已,一個是字型檔 PowerlineSymbols.otf,另外一個是設定檔 10-powerline-symbols.conf

主要還是練習打包 .deb 並且使用 Launchpad 放自己包的 package,十多年前也差不多是這樣開始玩 FreeBSDsend-pr 累積經驗...

Google 官方提供 Google Fonts 下載的建議方案...

Update:一次只能選一個字體,找不到全選的地方,然後有一千多個... 還是去網路上找人家包好整包抓比較快。

Google Developers Blog 上看到官方對於下載 Google Fonts 的建議方案:「Download Google fonts to your desktop」。

Monotype 所推出的工具「SkyFonts」,支援 Windows 與 Mac 版。當 Google Fonts 有新的字型時,SkyFonts 會自動更新。不過當 Google Fonts 刪除時會發生什麼事情就不知道了...

會需要 Microsoft .NET Framework 4.0 與 WindowsInstaller 4.5 (x86):

這樣感覺有點肥... XD