Google Fonts とは
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">
これでブログ上も反映されるようになった。