難しいハングルWebフォント最適化、裏技で解決する

ハングルのWebフォントを使おうとしたものの、正しく表示されずあきらめかけていたところ、
なんとか見つけた方法を整理してみました。

• ハングルWebフォントを使うと、最初の画面の初回読み込み時に適用フォントがすぐ表示されない。
• 英語圏では font-display: optional で手軽に対応できるが、ハングルでは難しい。
• 韓国で実装した事例が見つからなかったため、自分で作ってみた
• ページに登場する文字だけで構成したフォントサブセットを生成 --> 失敗。依然として大きい
• ページ上部の最初の画面に登場する文字だけでサブセットを生成 --> 成功。十分に小さい
• ユーザーが最初の画面にとどまっている間に、完全なWebフォントの読み込みを完了させる。

[filekiwi]

https://velog.io/@filekiwi/optimization-web-font-hangul-part-1
この記事もあわせて読んでみてください。
国内企業がWebフォント最適化をどのように行っているかも見ることができます。