やりたいこと
- Adobe Fonts（ウェブフォント）の読み込み中/読み込み後でフォントが切り替わらないようにしたい！
とりあえず一旦の解決方法
- 下記のスタイルを組み込み、読み込み中の際に表示されないようにしました。
.wf-loading {
opacity: 0;
}
何が問題なのか？
- サイトに使用しているAdobe Fontsの「Kinto Sans」のfont-display設定が変更できないので、フォント読み込み中と読み込み後で大きく見た目が変わってしまう。
- Adobe Fontsのサイト側でWebプロジェクトで設定できるはずの
font-displayが反映されていないので設定できない。
期待していたこと
- Adobe Fontsには、webプロジェクトという画面でfont-displayの設定ができるので、そちらで設定した通りにフォントの読み込みができる。
- 設定値は下記リンクのように指定されています。これは、CSSのfont-display設定と同様となります。
https://helpx.adobe.com/jp/fonts/using/font-display-settings.html
-
font-displayについては、こちらを参照。
https://developer.mozilla.org/ja/docs/Web/CSS/@font-face/font-display
- 画像の右下の部分で、設定をします。
- 今回だと、フォント表示の設定を「block」にすることで、webフォントが読み込まれるまでの間、代替フォントが表示されず、テキストが表示されないようにしようとしていました。（この設定がアクセシビリティ的に良いかどうかは今回は考慮していません。）
- ちなみにGoogle Fontsのwebフォントはサイトで発行されるURLにオプションとしてfont-display: swapが初期で設定されていて、任意で変更可能です。
- こちらはGoogle Fonts側で書かれた、Webフォントの最適化について、なんとAdobe Fonts側ではどこで設定するかまで書いてあります（英語ですが）
https://fonts.google.com/knowledge/using_type/using_web_fonts
やったこと
- Adobe Fontsのフォント読み込みコードを追加したHTMLを確認すると、下記のclassがタグに挿入されていることがわかります。
| 状態 | クラス名 |
|---|---|
| Web フォントの読み込み中 | .wf-loading |
| Web フォントがアクティブな状態 | .wf-active |
| Web フォントが非アクティブな状態 | .wf-inactive |
https://helpx.adobe.com/jp/fonts/using/font-events.html
- こちらを利用して、読み込み中のクラスに透過を設定して、表示されないようにしました。
.wf-loading {
opacity: 0;
}
良い解決方法を情報募集中です
- とりあえず、目的通りに閲覧中にフォントが切り替わって見えないようにはできたのですが、もっと良い方法をご存知の方は、コメントなどで教えていただけると助かります！（願わくば、Adobe Fonts側で動作が修正されることを願っています）