Google fontsの日本語フォントの種類が増えていた。当ブログもタイトルにGoogle fontsを使用しているが、使用当時は5-6種類だったが現在は30種類まで増えている。
ブログなどに埋め込む方法はGoogle fontsは以下のサイトにアクセスする。
デフォルトはすべてのフォントが表示され、日本語フォントだけ表示したい場合は"Language"から"Japanese"を選択する。
使用したいフォントをクリックし、"+Select this style"をクリックする。
htmlとcssのコードが表示されるので、それぞれコピー&ペーストを実行する。
複数のスタイルを利用する場合は、上の操作を繰り返すと埋め込みコードもまとめたものを出力してくれる。例えばDotGothic16, Hachi Maru Pop, Train oneの3種類の場合
<style> @import url('https://fonts.googleapis.com/css2?family=DotGothic16&family=Hachi+Maru+Pop&family=Train+One&display=swap'); </style>
となり1つのスタイルに1行づつ記述する必要はない。
以下DotGothic16, Hachi Maru Pop, Train oneの3種類のGoogle fontsの動作例を示す。
See the Pen google fonts by ATATAT (@atatat) on CodePen.