［ムラゴンブログ］ブログの書体をGoogleフォントに変えてみる

とあるウェブ上で、
ステキなフォントを見つけ、、これってどうやって設定するのだろうと…

Webフォントって聞いたことはあったものの、
これがそうだったんですねぇ。

で、、、Googleフォントから無料でダウンロードして使えると知り。
自分でもやってみた次第です。

参考になりましたサイト様はこちら。
丁寧に解説されていて、無事ダウンロードもできました🙌
ありがとうございます…

Google Fonts(グーグルフォント)のダウンロードと使い方 - ゼロからホームページ

フォントのことをもっと詳しく知りたくて調べていると、webフォントやGoogleフォントという言葉を見る機会が増えたけど、どうしたら使えるのかがよくわからないと困っていませんか？今回は、Googleフォントのダウンロードと使い方について解説...

ただ、やってた最中は夢中だったせいか、、
自分で経過を説明できそうもないのです、、💦

なのですみません…
フォントのダウンロードまでは、リンクしたこちらのサイト様からご覧ください。

ダウンロードできると、
自分のパソコン設定にこんな感じで出ます。
→ 端折りすぎw

フォントがダウンロードできてるかどうか、、

確認のしかたは、
PCスタートボタン ⇨ 設定 ⇨ 個人用設定 ⇨ フォントで。

使用可能なフォント欄から、
例えば“Noto”と入れてみてください。無事入っていれば一覧に出ます。

これを早速、
ムラゴンブログで表示してみます。

ダッシュボードのデザイン変更 ⇨
CSSカスタマイズへ以下を記入します。

CSS

/* 独自フォント */
.m-plus-1p-regular {
font-family: "M PLUS 1p", sans-serif;
font-weight: 400;
font-style: normal;
}

.noto-sans-jp-<uniquifier> {
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-weight: <weight>;
font-style: normal;
}

これはGoogleフォントの
サイトに表示されるCSSコードを、そのままココに記述したもの。

こうやって表示くださいね~という方法です。

でも?
これではまだ、フォントがPCに入ってる状態なだけ…。ブログの書体には反映されてない状態です。

なのでさらに、
以下の文字指定なCSSを入れます。

このCSSタグ…
全体に表示させてますが、部分的にだけ…と指定することもできます。

詳しくは、
スタイルシート（CSS）の関連書籍などご覧ください。ここでは説明省きます。

body {
font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic Pro', 'Yu Gothic UI', 'Meiryo UI', メイリオ, Yu Gothic, 'M PLUS 1p', sans-serif;
}

font-family: 'Noto Sans JP',～～

先頭の文字から表示される…という意のフォントタグ。

font-family: 'M PLUS 1p',～～

こっちを希望であれば、これを先頭にしてください。

今回ダウンロードしたのは、
“Noto Sans JP”と“M PLUS 1p”

それぞれこんな感じの文字になります。

Noto Sans JP ⇩

M PLUS 1p ⇩

フォントをPCにダウンロードし、
このようにCSSで表示することできれば、他のブログサイトでも文字として使えるってことですね。

Googleフォントは、リンクして表示させることもできるようですが。
サイト表示がちょっと遅くなる?と聞いたことあり。

ダウンロードはそう難関！
って感じもなかったので、このやり方で使わせてもらってます。

見やすく人気の書体なようです。