omohayui blog

おも‐はゆ・い【面映ゆい】[形][文]おもはゆ・し[ク]《顔を合わせるとまばゆく感じられる意》きまりが悪い。てれくさい。

Google Fonts が @import で読み込まれないとき

Google Fonts とは

fonts.google.com

Googleさんが提供している。Webフォント。
サーバー上の各フォントデータを読み込むことで、オサレなフォントが使えるようになるわけです。 そして無料。

起きていた問題

はてなブログのデザインをちょっと変えようと思って、
[デザイン] > [カスタマイズ] > [デザインCSS] の一番上で “Share Tech Mono” を import してみたところ、
プレビュー画面には表示されるが、更新後のブログには Google Fonts が反映されない。

@import url('https://fonts.googleapis.com/css?family=Share+Tech+Mono');

原因

詳細までは調べられてないが devtool 等で確認したところ読み込みタイミングがよろしくなさそう。

回避策

[デザインCSS] で読み込むのをやめて、headで指定するように修正。
[設定] > [詳細設定] > [検索エンジン最適化] > [headに要素を追加] に下記を追加するだけ。

<link href="https://fonts.googleapis.com/css?family=Share+Tech+Mono" rel="stylesheet">

これでブログ上も反映されるようになった。