google fonts 日本語WEBフォント

Google Fontsは、今更説明をする必要もないほどよく知られたWEBフォントですが、日本語WEBフォントは、Noto Sans Japanese を除くと、ほとんど見つかりませんが、試験提供されている日本語フォントはNoto Sans Japaneseを含み9種類ほど公開されているようです。

Google Fonts + 日本語早期アクセス

このページでは、WordPress用の、Raindropsテーマを使用して、これらのアーリーアクセスフォントの表示試験を行っています。

Raindropsテーマは、アーリーアクセスフォントの自動ロード機能があり、google-font-noto-sans-japaneseとクラスを投稿本文に記述すると、リンクの作成が自動的に行われますが、ここで試験しているフォントは、エンドポイントが通常のアーリーアクセスフォントと異なるため、通常とは異なる方法で、フォントをロードしています。

いずれも投稿の編集画面のみの操作で完結しますので、参考にしていただければ幸いです。

Note:Noto Sans Japaneseは、google-font-noto-sans-japaneseクラスを記述するだけで、適用されます。（このブロック）

サイト内関連記事

あかるく、やさしく

M+ 1p

日常的に使うための飽きのこない、それでいてちょっと気になるデザイン。

森下浩司

あかるく、やさしく

Rounded M+ 1c

明るく伸びやかなデザインを心がけた。

自家製フォント工房

あかるく、やさしく

はんなり明朝
Hannari

明朝体は墨溜まりを意識してデザインしています。

中井良尚 Yoshihisa Nakai

あかるく、やさしく

こころ明朝
Kokoro

少しほっそりとした、角丸な明朝体です。まろやかで、軽い感じがする文字です。

中井良尚 Yoshihisa Nakai

あかるく、やさしく

さわらびゴシック
Sawarabi Gothic

本文用のフォントとして使いやすくなるようにイメージしています。

mishio

あかるく、やさしく

ニクキュウ
Nikukyu

モリっとして、ツヤのあるカタカナフォントです。

中井良尚 Yoshihisa Nakai

あかるく、やさしく

ニコモジ
Nico Moji

すこしでもデザインのてだすけになれればさいわいです。

Ku-ku (Do-Font)

本文HTML

<div class="fonts">
	<p class="wf-mplus1p f40">あかるく、やさしく</p>
	<blockquote>
		M+ 1p
		日常的に使うための飽きのこない、それでいてちょっと気になるデザイン。
		森下浩司
	</blockquote>
	<p class="wf-roundedmplus1c f40">あかるく、やさしく</p>
	<blockquote>
		Rounded M+ 1c
		明るく伸びやかなデザインを心がけた。
		自家製フォント工房
	</blockquote>
	<p class="wf-hannari f40">あかるく、やさしく</p>
	<blockquote>
		はんなり明朝
		Hannari
		明朝体は墨溜まりを意識してデザインしています。
		中井良尚 Yoshihisa Nakai
	</blockquote>
	<p class="google-font-kokoro f40">あかるく、やさしく</p>
	<blockquote>
		こころ明朝
		Kokoro
		少しほっそりとした、角丸な明朝体です。まろやかで、軽い感じがする文字です。
		中井良尚 Yoshihisa Nakai
	</blockquote>
	<p class="wf-sawarabimincho f40">あかるく、やさしく</p>
	<blockquote>
		さわらびゴシック
		Sawarabi Gothic
		本文用のフォントとして使いやすくなるようにイメージしています。
		mishio
	</blockquote>
	<p class="wf-nikukyu f40">あかるく、やさしく</p>
	<blockquote>
		ニクキュウ
		Nikukyu
		モリっとして、ツヤのあるカタカナフォントです。
		中井良尚 Yoshihisa Nakai
	</blockquote>
	<p class="wf-nicomoji f40">あかるく、やさしく</p>
	<blockquote>
		ニコモジ
		Nico Moji
		すこしでもデザインのてだすけになれればさいわいです。
		Ku-ku (Do-Font)
	</blockquote>
</div>

この投稿のカスタムCSS

各投稿の編集画面にあるCSS入力エリアに以下を入力

.wf-mplus1p {
 font-family: "Mplus 1p";
}
.wf-roundedmplus1c {
 font-family: "Rounded Mplus 1c";
}
.wf-hannari {
 font-family: "Hannari";
}
.wf-kokoro {
 font-family: "Kokoro";
}
.wf-sawarabimincho {
 font-family: "Sawarabi Mincho";
}
.wf-nikukyu {
 font-family: "Nikukyu";
}
.wf-nicomoji {
 font-family: "Nico Moji";
}
.fonts p{
 font-size:4em;
}
.fonts blockquote p, .fonts blockquote{
 font-size:1em;
}

カスタムフィールド

カスタムフィールド名　meta を作成し、以下を記述しました。

<link href="https://fonts.googleapis.com/earlyaccess/mplus1p.css" rel="stylesheet" />

<link href="https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css" rel="stylesheet" />

<link href="https://fonts.googleapis.com/earlyaccess/hannari.css" rel="stylesheet" />

<link href="https://fonts.googleapis.com/earlyaccess/kokoro.css" rel="stylesheet" />

<link href="https://fonts.googleapis.com/earlyaccess/sawarabimincho.css" rel="stylesheet" />

<link href="https://fonts.googleapis.com/earlyaccess/nikukyu.css" rel="stylesheet" />

<link href="https://fonts.googleapis.com/earlyaccess/nicomoji.css" rel="stylesheet" />

meta という名前のカスタムフィールドは、テーマで予約されたフィールドで、スタイルシートlink要素を、この投稿のヘッダーに挿入します。

CSS note