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/





PICK UP
RELATED POSTS
  • CSSで作成する吹き出しとデザインのアイデア
  • 【CSS】CSSだけで作られた簡単に使えるアイコンセット
  • 【jQuery】画像をハーフトーンに変換するプラグイン「Breathing Halftone」
  • カスタマイズして使用できるアイコンライブラリ「Vivid.js」
  • 画像に3Dブラーのホバーエフェクトを掛けられる「tiltfx.js」
  • 画像を使わずにCSSだけで三角・矢印を作る方法
POPULAR POSTS
  • 長いURLを短くするオススメの短縮URLサービス
  • 無料で使用できるフリーイラスト素材サイトまとめ
  • 漢字が使えるおすすめの日本語フリーフォントまとめ
  • CSSで実装するボタンデザインとホバーエフェクトのアイデア
  • CSSで簡単に作れるおしゃれな見出しデザイン20選
RECENT POSTS
  • プライス・値段表示などに使えそうな英数字フォント13選
  • hulu (フールー)で観れるおすすめの海外ドラマ・国内ドラマ【2019年4月版】
  • 無料で使えるレトロ・ヴィンテージな雰囲気の英語フォントまとめ
  • Photoshopで簡単に背景を伸ばすテクニック
  • CSSで作成する吹き出しとデザインのアイデア