Googleフォントの遅延読み込み
Webフォント…特に日本語は重いので、非同期で読み込みを遅らせます💡
なお、英語だけなら読み込みは速いし日本語の Webフォントを使わないのなら、この項はあまり重要じゃないと思います🙂
遅延読み込みには、Google と Typekit が共同開発した Web Font Loader というスクリプトを使います🎵
Adobe の Webフォント等もこれで呼び出せます💡
これを html 内に貼り付けて、フォントを読み込みます🤗
私の例なので、フォントとその URL はお望みのものに変えて下さい✨
families にはファイル名じゃなく、CSS で指定する名前を入れます💡
custom の部分は何でも入れていいので、Google Fonts + 日本語の一覧の中で「早期アクセス」と書いてある、試験的なフォントを呼び出す為に追加しています💡
※「早期アクセス」から外されれば他のフォントと同じ記述で呼び出せます😉
また、例えば CSS に、
@font-face {
font-family: 'JKゴシックM';
src: url(font/JKG-M_3.woff2);
}
と書いておき、Web Font Loader には
custom: { families: [ 'JKゴシックM' ] },
と追加すれば、ちゃんと処理に追加されますが、日本語の部分は飛ばされ jkm として出力されます😊
それから…2019年5月21日、Google が、「フォントを呼び出す URL に &display=swap を付ける事で、読み込みを終えるまでの間、他のフォントを指定された優先順位で呼び出す事が出来る様になった」と発表しました
これについて本項では Web Font Loader のやり方で既に実現していましたし、その内 Web Font Loader がいい感じにしてくれるでしょう😊
今は Web Font Loader の開発者にお任せして、これを呼び出していれば OK🎵(2019年7月23日で Google から呼び出せる Web Font Loader の最新バージョンは 1.6.26)
Typekit Web フォント(Adobe Fonts)を呼び出す行の id は、Google の families と同じです💡
フォントに対応したスクリプトが自動的にヘッダーに呼び出されます😊(Googleフォントが上書きされるのか併用出来ない様です)
typekit: { id: 'fot-udmarugo-large-pr6n' },
Autoptimize の追加設定にも webfont.js で遅延読み込みをする設定があるんですけど、Web Font Loader を自分で貼り付けるやり方のほうが速度判定は速くなってるし、実際に速いです😊(私の実験だと)
これでフォントの読み込みが終わらずともサイトのデザインは読み込まれますけど、少なくとも Android ではフォントの読み込みが終わるまで文字が消えたままになるのを確認していて、実際に速度判定でもレンダリングをブロックされていると言われます😅もう一息だ
レンダリングをブロックしなくなるように、更に CSS を以下のようにします💡
.wf-active は、Web Font Loader が自動的に html タグに付与する属性で、このように書くと完全にレンダリングをブロックしなくなります😊(上は私の例です)
フォントの読み込みが終わるまで、最初に指定したフォントがすぐさま表示され、その後に .wf-active で指定したフォントが適用されます🎵
ネット上にあるフリーフォントを用意して使用する場合は以下のソフト等で woff2 ファイルに変換して使用して下さい
日本語フォントは重いから、様々な工夫が要りますけど、私としてはどこも同じフォントになるのが好きじゃないので、日本語フォントは使いたいです😉
読み易さを重視すると使える日本語フォントは限られるでしょうけどね😊
モバイルでも PC でも見やすく
補足みたいな項なんですけど、viewport は
<meta name="viewport" content="width=device-width">
これ一択です🙂これだけ指定しています
スケールは Safari とかで無視されるので書く必要はありません💡
CSS に指定するサイズはフォントも含めて全て vw (画面の横幅に対する数値)で指定します😉
100で、画面の幅の100%です💡
これで全環境で同じデザインにするのが簡単になります😁
高さにはごく一部のものに対して vh を使ってる程度です😚
最大最小はサポートしないブラウザもあるので私は使いません😉
最後に、モバイルに拘る理由
ネット利用のデバイスの大半を占めるのがモバイル、私もほとんどデスクトップを起動していません🤗💧
起動が面倒なのがパソコン使わない最大の理由なんですよねぃ
話が逸れますけど、ネットのサービスのアプリ版て「何のために出したの❓」っていうくらい、機能が制限されてて使い物にならないものが多いんですよね…有名企業なのに手抜き過ぎ😓ハラ立つレベル
あと、この世の中、パソコンまでは買えない人が多数います…
スマホは安くないし、安いパソコンもあるけど、最低でもスマホは、人や社会と繋がっているために高価でも泣く泣く買っているんですよね😥それで力尽きる💦
…あっ😳💧貧困問題については次の機会に熱く語らせて貰うとします…😥
ここまで言っておいて、モバイルのために必要な事はそう多くはないんですけど、文字は大きい方がいいです
デスクトップは解像度が高くて画面が大きいから、やたら文字がちっちゃくなるサイトが多いの😳プレステ4が出たばかりの頃の字幕か😭
スマホの画面で大きめの文字になる様にと1つの CSS でやると、PC やタブレットで見た時、やや大きくなりますけど、私は問題ないと思います🙂
機能面ですけど、PC で出来る事は全てモバイルでも出来るようにするべきです😐
これくらいかなっ❓あまり多くはないんですけど、とにかく文字は気持ち大きめで、スマホで反応しないようなボタンやフォームは使ってはいけません😓
と言っても、まず動くのでっ😁問題は、動くけどデザインが悪いとか…
こんな感じで、お疲れさまでした😆
ぜひぜひ(２つは面倒だし)、１つのデザインでどっちからでもイケるようにしてみましょうっ🤗
皆さん、私と高速のネットライフを😚💕
