Bloggerで日本語のGoogle Fontsを使う方法〈ちょいむず〉

byNatchan - 2023/06/13 2023/06/22

0

Bloggerで日本語のGoogle Fontsを使う方法を教えます。Blogger歴が長い自分でさえ手こずったので、導入方法を解説することにしました。備忘録として残しておきますが、Webの世界は移り変わりが早いのですぐに情報が古くなる可能性あり...。

{tocify} $title={Table of Contents}

無料配布中！当サイトの運営者Natchanが制作したフリー素材を『イラストAC』にて無料でDLできちゃいます( ^o^)⊃―☆{codeBox}

Google Fontsの選び方

まず、Google Fontsには日本語フォントがいくつかありますが、少なくとも2つのスタイルを持つ日本語フォントを選んでください。2種類ないとテキストを太字にしたときに太くならないからです！

私はDotGothic16を入れたかったけど、1種類の太さしかないので諦めました。おすすめはNoto Sans JPかZen Kaku Gothic New、丸字ならM PLUS Rounded 1cかな。

そして、太さ加減は400と700を選んでください。日本語フォントはただでさえ重いのでそれ以外は不要です。300は細すぎるのでNG。私は細字にしたかったので300を1度導入してみたら、文字が細すぎて見づらい上に若干ガタついて表示されたから、やっぱり400と700が無難。

次で手順を教えます。

BloggerでGoogle Fontsを使う方法

それでは、本題に入ります。ここではNoto Sans JPでやります。

STEP1 : お好みのフォントから400と700を選択

プラスアイコンが付いた「Select Regular 400」みたいなテキストをクリックすれば選択できます。

STEP2 : 右上部のWindowsのロゴみたいなアイコンをクリック

これマジでわかりづらい

STEP3 : <link>のコードをコピー

<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=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">{codeBox}

STEP4 : コードの書き換えと編集

ちょっと面倒ですが、この作業をしないとエラーで保存できないので以下の通りに従ってください。コードを3回書き換えます。

1つ目はcrossorigin→link='crossorigin'へ書き換えます。

2つ目はdisplayの前にある&の後にamp;を書き足します。

3つ目はタグを閉じるために、各項目の終わりに</link>を3個書き足します。

上記の通りにコードを編集すると、最終的に下記のような形になります。

<link rel="preconnect" href="https://fonts.googleapis.com"></link>
<link rel="preconnect" href="https://fonts.gstatic.com" link='crossorigin'></link>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet"></link>{codeBox}