Google Fontsの使い方　日本語もありますよ！

Google Fontsとは、Googleが無料提供しているWebフォントです。商用も使えますし、2019年から日本語フォントが追加されました。部分的に使用するだけで、おしゃれな印象になりますね。ただ、あまり使用するとサイトの表示スピードが低下するので、注意が必要です。

Webフォントって何？

PCやスマホには、それぞれ異なるフォントがインストールされています。サイトでそれらに無いフォントが使われていた場合、代替えフォントが使われます。デザイン性を統一する際にWebフォントを使う事が出来ます。サーバー上のフォントにリンクして、それを参照する仕組みです。

Google Fontsを選ぶ

Google Fonts

Browse Fonts – Google Fonts Making the web more beautiful, fast, and open through great typography

• 1:言語を選択 [Japanese]
• 2:比べたい文言を入力するとイメージしやすいです。
• 3:気に入ったフォントをクリック。

• 4-1:気に入ったフォントスタイルを選び[Select this style]をクリックして登録する方法と、
  4-2:ページをスクロールして　[+]をクリックして登録する方法。どちらもStyleを修正出来ます。
• 5:登録内容が確認できます。ショッピングカートの様な感じ。複数登録可能です。

6：[Enbed]をクリックしてコードを入手します。

設定

CSS rules to specify families のコードはCSSファイルに書きます。h1に適応する場合は、こんな感じ。

h1{font-family: 'Roboto', sans-serif;}

headerにリンク

シンプルな方法です。普通のHTMLサイトでも何でも単に追加するだけです。Google Fontのサイトで選んだ書体のリンクをコピペして下さい。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@500&display=swap" rel="stylesheet">

WordPressの場合は、function.phpにフックを使い、headerテンプレートに直接書き込まなくても追加出来る様にします。リンクの3行はGoogle Fontのサイトで選んだ書体のリンクをコピペして下さい。

add_action( 'wp_head', 'add_meta_to_head' );
function add_meta_to_head() {
	if ( is_front_page() ) {
echo '
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@500&display=swap" rel="stylesheet">
';
}
}

htmlに記載しなくても@importにあるコードをCSSファイルの中に書いてもOKです。　非推奨になりましたので、書き直しをお勧めします。

何故か、フックで設定したのに下層ページなど一部で反映されない時は、この方法で回避できました。

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');