Google Fontsの使い方とおすすめ日本語フォント

Google Fontsの使い方とおすすめ日本語フォント
2018年9月に日本語フォントが正式にサポートされ、ますますGoogleフォントを利用するユーザーが増加しました。Google Fontsは900種類以上のフォントを無料で利用することができます。今回は、Webフォントだけでなくダウンロードも可能なGoogleフォントの使い方と、おすすめの日本語フォントを紹介します。



Googleフォントとは



Google Fontsは2010年にリリースしたGoogleが提供する、無料で利用可能ななフォントのディレクトリーサービスです。Googleのサーバーからフォントデータを読み込んでWebページにフォントを表示できるWebフォントで世界各国で利用されています。

日本語フォントについて

日本語フォントを使用できることは便利なことですが、デメリットもありますので理解しておきましょう。 日本語フォントは英語フォントより文字数が多いのでファイルサイズも大きくなります。英文フォントですとアルファベット・英数・記号合わせて100文字程度ですが、日本語はひらがな・カタカナ・英数・記号、漢字でJIS第1水準漢字だけでも2,965文字あります。表示速度の面でも日本語フォントを複数使用することは避けた方がよいでしょう。また、日本語フォントは太さ(ウエイト)が何種類か用意されてますが、全種類選択すると読み込み速度が遅くなるので注意が必要です。



Googleフォントの使い方



1

Google Fontsへアクセス

まずはGoogle Fontsページにアクセスしましょう。Googleフォントはユーザー登録の必要がなく無料で利用することができます。



2

フォントを検索する

フォント検索はページ上部エリアの検索機能を使って目的のフォントを検索します。


Categories
Serif 明朝体
Sans Serif ゴシック体
Display ディスプレイ・装飾書体
Handwriting
手書き風書体
Monospace
等幅書体(文字幅がすべて同じ)

Languages

日本語フォントを検索したい場合は、LanguagesのプルダウンメニューからJapaneseを選択します。


Font properties
Number of styles 文字のスタイル数
Thickness 文字の太さ
Slant 文字の傾斜
Width
文字の幅
Show only variable fonts

チェックを入れるとvariable fontsのみが表示されます。variable fontsとは1つのフォントファイルで文字の太さ(ウェイト)を可変できるフォントのことをいいます。日本語のvariable fontはありません。


Sort
Trending トレンド(流行)順
Most popular 人気順
Newest 新着順
Name
アルファベット順(フォント名)



3

フォントを選択する

目的のフォントをクリックすると、フォント詳細ページに遷移します。

使用したいフォントの右にあるSelect this styleをクリックすると、右エリアのSelected familiesにフォントが追加されます。複数のフォント・スタイルを選択することもできます。




4

コードを貼り付ける

Selected families内にcssへのリンク・記述方法が表示されるので、linkの上段に表示されているコードをhead内へ貼り付け、下段のfont-familyを反映させたいCSSに追加します。CSS内に記述する場合は@importをクリックして表示されたコードをコピペします。


html
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
    
    
CSS
    .font01{
        font-family: 'Noto Sans JP', sans-serif;
    }
    
    

CSSから読み込ませる場合は@IMPORTに表示されるコードをコピーして貼り付けてください。

CSS
    @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
    
    

以上で、比較的簡単にGoogleフォントをサイト・ブログに反映させることができます。英語フォントも数多く提供されているので自分のサイトに合うフォントを探してみてください。



Googleフォントのダウンロード方法


GoogleフォントはダウンロードしてPCで使用することも可能です。ここではGoogleフォントのダウンロード方法を解説します。


1

フォントを選択する

Googleフォントにアクセスし、ダウンロードしたいフォントをクリックすると、フォント詳細ページに遷移します。



2

フォントをダウンロードする

ダウンロードしたいフォントの右にあるSelect this styleをクリックし、Download familyをクリックするとフォントをダウンロードします。

Google Fontsのライセンスについては、英文ですが以下のページに記載されてますのでご覧ください。




日本語のおすすめGoogleフォント



Googleフォントの日本語フォントは当初は6種類のみでしたが、現在では57書体(2022年4月現在)となっています。2021年にフォントワークス、2022年にはモリサワのユニバーサルフォントが提供され、使用できるフォントの幅も広がりました。 Noto Sans JPを中心にWebサイトで使用している例も多く見かけますが、ゴシック体・明朝体の他にも特徴のあるデザインフォントがありますので用途によって使い分けしてみましょう。数ある日本語フォントからおすすめのGoogleフォントを紹介します。



ゴシック体フォント



1

Noto Sans JP

GoogleとAdobeが共同開発し、2014年にリリースされたオープンソースの日本語フォント。ウェイトは6種類

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789

2

BIZ UDPGothic

モリサワの読みやすく使いやすいように設計されたユニバーサルデザインフォント。ウェイトは2種類

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789

3

M PLUS 1p

フリーフォントで有名なM+ FONTSのWebフォント版。漢字は直線的で、仮名は丸みのあるドッシリとした日本語フォント。ウェイトは7種類

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789

4

Kosugi

フォントサイズを変更しても読みやすいフォント。ウェイトは1種類

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789

5

M PLUS Rounded 1c

M PLUS 1pフォントの丸ゴシック体。ウェイトは7種類

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
6

Kosugi Maru

Kosugiフォントの丸ゴシック体。ウェイトは1種類

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789

7

Kiwi Maru

マメロンフォントをベースに文字側部分を少し丸めた加工したキウイ丸フォント。ウェイトは3種類

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789

8

Dela Gothic One

横長でどっしりした太いゴシック体フォントのデラゴシック。ウェイトは1種類

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789

9

DotGothic16

ドットで構成されたデジタル風デザインフォント。ウェイトは1種

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789


明朝体フォント



1

Noto Serif Japanese

Noto Sans JPと同様の明朝体。ウェイトは7種類

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
2

BIZ UDPMincho

モリサワの読みやすく使いやすいように設計されたユニバーサルデザインフォント。ウェイトは1種類

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
3

Shippori Mincho

うっとりするような明朝体を目指して制作した、オールドスタイル明朝体。ウェイトは5種類

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
4

Hina Mincho

ひな明朝は古風でかわいらしく品のある雛人形をイメージした明朝体フォント。ウェイトは1種類

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789


手書風フォント



1

Klee One

鉛筆やペンなどを使って書いた手書き風文字のような印象を与える楷書系硬筆体フォント。ウェイトは2種類

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
2

Yomogi

極細で個性が強く、それでいて可読性の高い手書き風フォント。ウェイトは1種類

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
3

Yusei Magic

油性マジックで手書きしたようなデザインフォント。ウェイトは1種類

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
4

Hachi Maru Pop

70~80年代に流行った丸文字をイメージしたキュートな丸ゴシック体。ウェイトは1種類

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
5

New Tegomin

手書き明朝体フォント「テゴミン」の更新版。手書きのゆらぎ感と明朝体の整然とした佇まいを掛け合わせたフォントを目指し作成されたフォント。ウェイトは1種類

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789


デザインフォント



1

Kaisei Decol

解星デコールは右払いやハネに星(ドット)を配置した、やわらかいイメージのデザインフォント。ウェイトは3種

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
2

RocknRoll One

丸い点が特徴的なポップなデザインフォント。ウェイトは1種類

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
3

Reggae One

アプリやコミックでも使えそうなシャープでポップなデザインフォント。ウェイトは1種

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
4

Potta One

ゴシック体を崩したポップな筆文字風フォント。ウェイトは1種類

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
5

Stick

棒(スティック)のように直線で表現されたデザインフォント。ウェイトは1種

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
6

Train One

アウトラインの内側と外側のラインで形成されるゴシック系フォント。ウェイトは1種

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789


日本語フォントは比較的数が少ないので、比較しやすいですが、英語となると900種類以上の中からフォントを検索しなければなりません。そんな時はアナリティクスページで人気の高いフォントをチェックすることができます。

これまで試験的に公開されていたGoogle Fonts+日本語早期アクセスも、まだ公開されているので参考までにチェックしてみてください。Webサイトのタイトルや見出しにGooglefontを使用することでデザインの幅も広がりますので、興味のある方は導入してみてはいかがでしょうか。以上、Googleフォントの使い方でした。

漢字が使えるおすすめの日本語フリーフォントまとめ

design.webclips.jp/japanese-free-font-vol01/



\ Webデザインに関するお役立ち情報を定期的に配信中 /

Follow @webclips_jp

PopularPosts
  • 無料で使えるフリーイラスト素材サイト55選(商用利用可)
  • 漢字が使える日本語フリーフォント97選(商用利用可)
  • 無料で使える日本語・英語のかわいいフリーフォント20選
  • 無料で使えるデジタル風フォント13選
  • 無料で使えるおしゃれな英語の筆記体フリーフォント20選
  • ビジネス系イラストをダウンロードできるフリー素材サイト7選
WordPress対応! 初心者におすすめのレンタルサーバー特集
RecentPosts
  • 【2024年11月版】WordPress対応のおすすめレンタルサーバー比較 ( 初心者向け )
  • Adobeのセール時期はいつ頃? Adobeセールの最新情報
  • 【2024年度】Adobe CC(Creative Cloud)を安く買う方法
  • Photoshopで使用できる“水しぶき系”ブラシ8選
  • 無料で使えるフリーイラスト素材サイト55選(商用利用可)
  • アイソメトリックイラストをダウンロードできるフリー素材サイト6選