webフォントの実用性が上がる。
通常の導入
Googleフォントのページで使用したいフォントを選んで、バリエーションがある場合はさらにそこから選んでwebフォントタグを生成する。
これの全種類を使う場合はこうなる。
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&display=swap" rel="stylesheet"><head>に挿入すれば、後はcssで適用するだけ。
body{
font-family: 'Shippori Mincho', serif;
}font-weightを指定すればバリエーションを選ぶことができる。
css上で読ませたい場合、@importも用意されてるのでコピペで済んでしまう。楽ちん。
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&display=swap');で、webフォントを使用して組み上げてブラウザで確認したとき、フォントは遅れて反映されるので、読み込み時に一瞬デフォルトのフォントが表示される。
うざったくてダサくてどうにかなんないの、っていう話。
結論
rel=”preload”を使う。
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" as="font" href="https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&display=swap" rel="stylesheet">「 rel=”preload” 」だけでも効いちゃったけど、他にも記述する作法があるっぽい。preloadしたい要素によってasの中身を書き換える感じ。詳細はこの記事がわかりやすかった。
実際に作ったのがこれ。
文句なしですね。
@importではどうなの
cssから別のcssファイルを@importするのはそもそもが軽量だから問題にならないんだけど、フォントを@importすると<head>で素の状態で読ませたときと同じ状態になる。@importに対して高速化する手段はないっぽい。
@importしてるcssファイルをpreloadすれば、ってのをやってみたけど無理だった。
キャッシュが効いてるのか再読み込み時は問題ないけど、初回は一瞬ブレる。
<head>への記述は行数が増えるから好きじゃないんだけど、webフォントは諦めて<head>に入れたほうがいいんじゃないかな。
自鯖だったらどうか
フォントをwoff形式で用意できたら自鯖にwebフォントを設置できる。
外部サーバーだからダメなんじゃないの？って考えることもある。だけどやってることは変わらないんで、なんなら配布してるサービス元のほうがそんじょそこらのサーバーより強いんで、逆に遅くなる可能性すらある。
ファイルの設置場所は関係ないということが分かる。どんまい。
参考
20221209追記：Material Iconsの導入
こうする
<link rel="preload" href="https://fonts.googleapis.com/icon?family=Material+Icons" as="style" onload="this.onload=null;this.rel='stylesheet'">
コメント