Google Fontsの使い方とおすすめ日本語フォント -初心者向け-

 
WebフォントとしてGoogleフォントを使用している方も多いと思いますが、日本語フォントに関して2018年9月に正式にサポートされました。これまで試験的に公開されていたGoogle Fonts+日本語早期アクセスでも日本語フォントを使用することができましたが、正式サポートにより日本語フォントを使用するユーザーも増加するのではないでしょうか。今回は、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
等幅書体(文字幅がすべて同じ)
Sorting
Trending トレンド(流行)順
Popular 人気順
Date Added 新着順
Alphabetical
アルファベット順(フォント名)
Font Style
Number of styles 文字のスタイル数
Thickness 文字の太さ
Slant 文字の傾斜
Width
文字の幅

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



3

フォントを選択する

使用したいフォントの右上にある+マークをクリックすると、ページ下部のFamily Selectedバーにフォントが選択/追加されます。

ページ下部のFamily Selectedバーをクリックすると、フォントの詳細が表示されます。日本語フォントを使用する場合はCUSTOMIZEをクリックしLanguagesからJapaneseを選択します。



4

コードを貼り付ける

EMBEDから上段に表示されているコードをhead内へ貼り付け、下段のfont-familyを反映させたいCSSに追加します。


html
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&amp;subset=japanese" rel="stylesheet">

CSS
.font01{
	font-family: 'Noto Sans JP', sans-serif;
}

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

CSS
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP&subset=japanese');

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



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


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


1

フォントを選択する

Googleフォントにアクセスし、ダウンロードしたいフォントの右上にある+マークをクリックすると、ページ下部のFamily Selectedバーにフォントが選択/追加されます。



2

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

ページ下部のFamily Selectedバーをクリックすると、フォントの詳細が表示されます。ウィンドウ右上にあるダウンロードマークからフォントをダウンロードすることができます。

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



日本語のGoogleフォント



1

Noto Sans JP

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


2

Noto Serif JP

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


3

Sawarabi Gothic

フリーライセンスで提供している日本語フォント。現状では漢字が十分に揃ってないようなので、メインのフォントとして使用するのは難しい。漢字収録率はさわらびフォントをご覧ください。ウェイトは1種類


4

Sawarabi Mincho

ゴシック体同様、漢字が十分に揃ってないようなので、メインのフォントとして使用するのは難しい。漢字収録率はさわらびフォントをご覧ください。ウェイトは1種類

5

M PLUS 1p

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


6

M PLUS Rounded 1c

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


7

Kosugi

新に追加されたゴシック体。フォントサイズを変更しても読みやすいフォント。ウェイトは1種類


8

Kosugi Maru

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

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

ワンポイントでタイトルにだけGoogleフォントを使用することもできますし、使用することによりデザインの幅も広がります。 以上、Google Fontsの使い方の解説でした。

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

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




  • Font Awesomeをラインアイコンにしたアイコンセット「Line Awesome」
  • 500種類以上のアイコンフォントとCSSのツールキット「Fontisto」
  • Googleが公開した日本語ウェブフォント「Google Fonts + 日本語早期アクセス」
  • 無料で使用できる!450種類以上のラインアイコン「LineIcons」
  • アイコンフォント「FontAwesome」の使い方
RELATED POSTS
  • 【Webデザイン】Webサイト制作に役立つブックマークレット
  • 【jQuery】画像のサイズを保持しつつレスポンシブに変化させる「ResponsifyJS」
  • CSSで作成する吹き出しとデザインのアイデア
  • 500種類以上のアイコンフォントとCSSのツールキット「Fontisto」
  • 軽快なアニメーションのバーガーメニュー「Ember Burger Menu」
  • 2択のUIデザインから正しいデザインを選択していくゲーム「Can’t Unsee」
POPULAR POSTS
  • 【無料】漢字が使える日本語フリーフォント59選
  • Youtubeの埋め込み動画をレスポンシブに対応させる方法
  • Photoshopで簡単に背景を伸ばすテクニック
  • CSSで簡単に作れるおしゃれな見出しデザイン20選
  • 似たフォントを探したい!フォントを調べる時に役に立つツール・サイト10選
RECENT POSTS
  • 背景や区切り線などを簡単に装飾できるCSSライブラリ「pattern.css」
  • セクションの区切りをデザインできる「CSS Section Separator Generator」
  • 動画やアニメーションgifの背景を自動で消去してくれる「Unscreen」
  • ポップなイラストをダウンロードできる「Download 80 free illustrations」
  • hulu (フールー)で観れるおすすめの海外ドラマ・国内ドラマ【2020年3月版】