解法說明：https://stackoverflow.com/questions/9351352/font-not-getting-applied-in-a-web-site-viewed-in-ipad
線上產生自訂英文字形的 svg 字體檔：https://www.fontsquirrel.com/tools/webfont-generator
簡單來說，iphone系列不吃普通 .ttf 字體格式，所以你把這個丟到自己空間，只有一般電腦跟安卓系列手機會正常顯示你要的字體。蘋果系列手機跟平版使用 iOS devices 只吃 SVG format font files，就會 GG。
不過我在測試的時候遇到很奇怪的事情，後來回去看 stackoverflow 裡面，解答者底下有人的回覆。我懷疑我們遇到的是類似的狀況。
簡單來說就是我套用失敗，但我的狀況比較奇葩，就是我用線上svg字體產生檔他產生的範例檔案，在ipad上確實可以正常顯示。但是我套用到我自己的網頁的時候，卻又一直卡關。我交叉測試確認路徑是否正確，跟電腦還有安卓手機吃到的是否是我產生出來的檔案，都確認沒問題，但就是 ipad 上怎麼看都看不到，用無痕視窗開也一樣。
stackoverflow 裡面有人回說
We tried out the solution.. Still its not working… How ever its showing a default font not the original “whitney” font
Well.. we figured it out on our end itself.. the corresponding font “.otf” file fixed the problem.. thought of sharing it others.. (BTW svg didn’t worked for us)
我猜他可能遇到的狀況跟我類似。然後他們後來改用 .otf 的格式解決。
所以結論是有兩種解法
- 轉成 SVG format font files ，用上述工具會轉出 .woff 跟 .woff2 兩種。然後我測試的結果是如果手機曾經連到該網頁，莫名的還是會吃不過去。後來換瀏覽器好了以後才都好。感覺是 iphone 針對字體的快取這塊吃的有點難清除的感覺。
- 轉成 .otf。但這方法我沒用，所以不知道效果如何。
大概是這樣。