【無料】困ったらコレなフリーフォント3選[商用利用可能]｜Googleフォントの使い方(Noto Serif Japanese, Noto Sans Japanese, M PLUS Rounded 1c)

WEBサイト、動画やプレゼンなど文字を含んだコンテンツを作成する際に、どんなフォントを使うかで見る人に与える印象が大きく変わります。

最近は商用利用も可能なフリーフォントもとても増えてきました。

ここでは、こまったときはコレ！という商用利用可能なおすすめフリーフォントを３つ紹介しています。

また、Googleフォントの使い方も解説しています。

Googleフォント
困ったらとりあえずこのフォント！
Noto Serif Japanese
1. 「Noto」とは何か？
2. 「Serif」とは何か？
Noto Sans Japanese
1. Sansとは何か？
M PLUS Rounded 1c
（参考）おすすめフォント
（参考）日本語フォントの種類・違い・与える印象
（参考）欧文フォントの種類・違い・与える印象

Googleフォント

ここで紹介するのは全てGoogleフォントです。

先に、Googleフォントとは何か？やGoogleフォントの使い方について解説させていただきます。

Googleフォントとは何か？

Googleフォントはフォントの名称ではないのですが、Googleが無料で公開しているフォントサービスです。

無料でしかも商用利用可能という最強のフォント集です。最近では日本語（ひらがな、カタカナ、漢字）に対応しているフォントも増えてきました。

困ったときにGoogleフォントから好きなフォントを探すというのも大切です。

フィルターで「Japanese」を選択すれば、日本語対応しているフォント一覧が表示されます。

Googleフォントの使い方

Googleフォントの使い方は２種類あります。

Googleフォントの使い方

コードを埋め込む（WEBサイトなど）
ファイルをダウンロードする（PCに登録する）

コードを埋め込む

１つ目はコードを埋め込む方法です。これは、WEBサイトなど、オンラインでフォントを読み込む場合に使用します。

対象のGoogleフォントの「Get embed code」をクリックするとコードが表示されます。

手順1：CDNの読み込み

まず、上の「Embed code in the of your html」と記載がある部分が、GoogleフォントのCDN読込です。

これをheadタグ内に記述することで指定したGoogleフォントが使えるようになります。

<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@100..900&display=swap" rel="stylesheet">

headタグで埋め込む以外でもstyleタグやCSSファイルの中でCDNを読み込むこともできます。

<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
</style>

手順2：CSSでフォントを適用する

つづいて、Googleフォントを適用したい要素にCSSでフォントを指定します。

セレクタ {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>; /* 100-900で指定。通常サイズは400 */
  font-style: normal;
}

以上で完了です。