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

日本語フォントについて

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

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

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

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

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

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

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

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

    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
    
    

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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