【Webフォント】丸わかり！使えるWebフォント一覧【プレビュー＆設置コードつき！】

自由にフォントが使用できる印刷媒体と違い、Webでは表示できるフォントに制約があることを忘れてはいけません！

デザイナーによってかっこよく仕上げられたWebサイトのカンプがクライアントに大好評！

だけどコーディングに入り、「あれ？このフォント、Webフォントにない！」と気づき、

近しいWebフォントで表現しても、結果、「カンプとなんか違う」「なんかもっさりした？」となったり、

カンプが通ったんだから正確に表現せんといかん！とWebフォントにないものは画像やsvg（ベクターデータ）で代替するも、

ページが重くなり、今度は「ページ読み込み重くない？」、ページスピードインサイトの評点低くない？など。。

これを回避するためには、カンプの段階で、サイトのデータ転送パフォーマンスなども総合的に考えて、フォント設計をしている必要があります！

というわけで、よく使われるフォントをまとめました。

よく使われる無料フォント

日本語フォント

ゴシック系

• メイリオ
• Noto Sans JP (Google Font)※Noto Sans JPはヒラギノ角ゴシックの代替としてよく使われる

表示例

設置するコード:html

<div style="font-size:26px; font-weight:Regular;">
  <p style="font-family:'メイリオ', Meiryo, sans-serif;">こんな文字です。The font is this. メイリオ</p>
  <p style="font-family:'Noto Sans JP', sans-serif;">こんな文字です。The font is this. Noto Sans</p>
</div>

設置するコード:css

/*Notoサンズを追加する際は以下をcssに追加*/@import url('https://fonts.googleapis.com/css2?family=Lato&family=Noto+Sans+JP&family=Noto+Serif+JP&family=Roboto&display=swap');

明朝系

• Noto Serif JP (Google Font)

表示例

設置するコード:html

<div style="font-size:26px; font-weight:Regular;">
  <p style="font-family:'Noto Serif JP', serif;">こんな文字です。The font is this. Noto Serif</p>
</div>

設置するコード:css

/*Notoセリフを使用する際は以下をcssに追加*/@import url('https://fonts.googleapis.com/css2family=Noto+Serif+JP&display=swap');

欧米フォント

• Times (総称フォント)
• Arial (総称フォント)
• Century (総称フォント)
• Lato (Google Font)
• Roboto (Google Font)

表示例

設置するコード:html

<div style="font-size:26px; font-weight:400;">
   <p style="font-family: Times;">Times is this. 2021/6/27</p>
  <p style="font-family: century;">Century is this. 2021/6/27</p>
  <p style="font-family:'lato';">Lato is this. 2021/6/27</p>
  <p style="font-family:'roboto';">Roboto is this. 2021/6/27</p>
</div>

設置するコード:css

/*LatoかRobotoを使用する際は以下をcssに追加*/@import url('https://fonts.googleapis.com/css2?family=Lato&family=Roboto&display=swap');

使用方法

Googleフォントであれば以下のサイトより、

1. フォントをインポートするlinkタグコードまたは、cssの@importコードを取得
2. cssでfont-familyを指定する

※動画でコードの取得の仕方をキャプチャしていますので、参考ください！

Google Font

似ているフォントとして置き換えされるWebフォント

使えるしかっこいいけど有料のフォント

欧米フォント

AXIS・・・Appleのサイトでも使用されているSF Pro JP(San Francisco Pro Japanese)は一般公開されていないため、「Appleで使ってるみたいなフォントをやりたい！」となった際に、その代替として使われたりします。

css フォントのweight対応表

Adobeフォント:あるにはあるが、多用するとどんどんページが重くなる。。

Googleフォント同様、Adobeフォントを読み込めばさらに多種のフォントをweb上で使えます。

しかし、むやみにフォントデータを読み込むのはページの読み込み速度を著しく低下させます。

日本語フォントは、漢字が存在するため、欧文フォントと違い、データ量の桁が全く違ってきます。

さらに、ウェイトの太さごとにフォントデータも違うものを読み込むため、使用するフォントおよびその文字の太さは、厳選するべきです。

今回紹介したようなフォントは、多くの日本語サイトで代表的に広く使われていますので、ユーザ側でCDNのフォントデータを一度読み込んだことがあれば、ユーザのブラウザ側にもキャッシュが存在するしているため、負荷は軽いので、積極的に使用するとよいです。