つれづれなる備忘録

日々の発見をあるがままに綴る

ブログデザイン備忘録 ~ Google fonts

f:id:ATATAT:20210912090138p:plain:w600

Google fontsの日本語フォントの種類が増えていた。当ブログもタイトルにGoogle fontsを使用しているが、使用当時は5-6種類だったが現在は30種類まで増えている。

ブログなどに埋め込む方法はGoogle fontsは以下のサイトにアクセスする。

fonts.google.com

デフォルトはすべてのフォントが表示され、日本語フォントだけ表示したい場合は"Language"から"Japanese"を選択する。

使用したいフォントをクリックし、"+Select this style"をクリックする。

"google fontの選択"
google fontの選択

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.