Adobe Fonts (旧 Typekit) で無料で使える Web フォントがたくさんあり使ってみたらいい感じだったので、はてなブログでの設定方法を書いてみました。
私のこのブログに設定した際、フォントの読み込みのタイミングで画面がガクっとちらついたので...その解消方法をメモしておきたかったのがこの話の発端です。
Adobe Fonts で Font を選ぶ
Adobe Fonts で使いたい Web フォントを選んで Web プロジェクトを作成するってことが必要です。アカウントの作成も必要ですが、無料の範囲でもかなりフォントが選べます。が、これは以下のドキュメントを見ながらサクッとできます。
作成したらブログに埋め込むためのコードが生成されますのでそれをコピーしておきます。
埋め込むコードがどこにあるかわからんくなった場合は、Adobe Fonts の右上に表示されている My Adobe Fonts →Web プロジェクト をクリックすると、作成した Web プロジェクトの "プロジェクトを埋め込み" を確認することができます。
はてなブログでの設定
埋め込み用のコードを設定する
まずはブログ自体が Web フォントを読み込めるようにするための設定です。
自分のはてなブログで、設定 → 詳細設定 を開きます。
詳細設定の画面で下の方にスクロールすると、要素にメタデータを追加 があります。ここに前述でコピーした埋め込みのコードを貼り付けましょう。既に設定済みのコードがある場合は、おかしくならないように注意しましょう。
フォントの設定をする
あとは、実際にフォントを設定するだけです。
自分で設定してる CSS とかあるならそれをいじってフォントを指定してあげましょう。デザインCSS をいじる感じですが、ブログのデザインのカスタマイズに関わる話なので公式のリンクを張るだけにしておきます。
描画時のちらつきをなくす
設定してみたら、画面が表示された瞬間フォントが切り替わってガクっとなります。ちらつくってやつですね。
気持ち悪いのでこれを直しましょう。
Adobe Fonts は Web Font Loader (webfontloader.js) を使ったフォントの読み込みを行っています。フォントのダウンロードが終わってから表示するようにします。
やることは、フォントの設定をしたデザインCSS に以下のコードを追加してあげるだけです。
html { visibility: hidden; } html.wf-active { visibility: visible; }
これで、描画時にフォントが変わってガクっとなる現象がなくなります。
まとめ
フロントエンドのことは情弱な私。
