Webフォントの利用

　Webフォントはローカル・デバイス（PC、スマートフォン、タブレット）ではなく、
　サーバーにインストールして使うフォント。
　基本的にはデバイスが何であれ、同じフォントで表示される。

　使ってみようと思いつつも読み込みに時間がかかって動作が重くなるので見送っていたが、
　近頃、Webフォントを利用しているサイトでもストレスを感じなくなっていることに気付いた。

　以前はWebフォントが全て読み込まれるまで文章が表示されなかった。
　今はいったんローカル・デバイスの標準フォント（システムフォント）で表示されてから、少しずつWebフォントに置き換わっていくようになった。

　スタイルシート　CSSの

@font-face{
}

の中に

font-display: swap

が記述されていれば、標準フォントからWebフォントへ置き換わっていく。

　CSSではなくlinkタグ指定の場合、

<link rel="stylesheet" href="https://～">

　hrefのURLに

&display=swap

が付いていれば、同様に置き換わっていく。

Webフォントの利用

　CSSのfont-familyで、フォント指定すると適用される。

　WordPressのテーマで、いくつか指定できる。
　Cocoonの場合、
　Cocoon設定　－　全体の「サイトフォント」からいくつか選べる。
　デフォルトは、ヒラギノ角ゴシック　Hiragino Kaku Gothic ProN、メイリオ　Meiryo。
　他に游ゴシック体　Yu Gothic、ＭＳ Ｐゴシック　MS PGothicが標準フォント。
　　※　上記４フォント中、ヒラギノがApple標準、他３フォントがWindows標準

　Cocoonで指定できるWebフォントは、
　Noto Sans JP、Noto Serif JP
　M PLUS 1p、M PLUS Rounded 1c
　さわらびゴシック　Sawarabi Gothic、さわらび明朝　Sawarabi Mincho
　小杉ゴシック　Kosugi、小杉丸ゴシック　Kosugi Maru
の８フォント。

　これらのWebフォントは、無料で使えるGoogleフォント　Google Fonts（fonts.google.com/）。

　Googleフォントの日本語フォントは、2018年－2019年にかけて、正式版（以前は早期アクセス版　Early Access）になり、上述の
　font-display: swap
指定の他、
　フォントファイル（日本語フォントは漢字を多く含むのでサイズが大きい）を分割して、スムーズに読み込まれるようになった。

　Googleフォントでなくても、フォントファイルの必要な部分に限って読み込ませる「サブセット化」という方法もある。

　当ブログで使っているレンタルサーバー（さくらインターネット）では、モリサワ社のWebフォント（33書体）が使える。
　　※　無料。PV（ページビュー）制限あり

　・　サーバーのコントロールパネルでドメイン指定
　・　JavaScriptファイル　.js指定
　・　CSS　font-family指定

　.js指定、CSS編集は外観　－　テーマファイルエディターにて
　　head-insert.phpおよびstyle.css

　プラグインも用意されている。

　当ブログもWebフォントを利用してみた。
　ひとまず手軽なところから、
　Cocoon設定　－　全体の「サイトフォント」で、小杉丸ゴシックを選択して様子見。
　太字が目立たないので、また変えるかも……。
　　※　「文字の太さ」を変えてみたが、表示が変わらなかった

　　＋）ブログのページ表示速度のスコア改善のため元に戻した。

　＋）２つめのブログ　ecoで、さわらび明朝（Webフォント）利用。