Google Fonts

【2019年版】Google Fonts の使い方(日本語フォントにも対応)

 

ここでは日本語フォントも使える「Google Fonts の使い方」を紹介しています。

使い方はとても簡単で

  1. フォントを選ぶ
  2. フォントを読み込む
  3. フォントを反映させる

の3ステップです。
 

一般的なウェブサイトと WordPress での導入方法を紹介しています。

簡単に利用できるので、初めて Google Fonts を使うときに参考にしていただければと思います🙂

 


 

Google Fonts の使い方

フォントを選ぶ

まずは Google Fonts にアクセスして、使いたいフォントを選んでいきます。
 

① Search fonts

フォント名から検索できます。
 

② Sentence

フォントの表示形式を選択できます。

Sentenceセンテンス(文章)
Alphabetアルファベット(ABC)
Paragraghパラグラフ(長めの文章)
Numerals数字
Custom好きな文章を表示できます。「Type something」に文章を入力します。

 

③ 40px

表示しているフォントのサイズを調整できます。
 

④ バケツ

画面の背景色を黒・白で切り替えることができます。
 

⑤ リスト

リスト表示・グリット表示を切り替えることができます。
 

⑥ リセット

設定した検索条件をリセットすることができます。
 

⑦ Categories

フォントのカテゴリを選択できます。

Serif文字の端に小さな装飾があるフォント
Sans Serif文字に装飾がないフォント
Displayヘッドラインやタイトルなど大きい文字に適したフォント
Handwriting手書き風のフォント
Monospace文字の幅が均一なフォント

 

⑧ Language

言語を選択できます。日本語フォントは「Japanese」を選択します。
 

⑨ Font Properties

フォントの線の太さ、傾きなどで絞り込みできます。

Number of stylesRegular, Medium, Bold など用意されているスタイルの数
Thicknessフォントの線の太さ
Slant文字の傾き
Widthフォントの幅

 
 

似ているフォントを探したい時

「使いたいフォントが有料なので似ている無料フォントを知りたい」という場合は、
フォント名 similar fonts と Google 検索すると、似ているフォントを見つけることができます。

例えば Helvetica に似ているフォントを見つけたい場合は
「Helvetica similar fonts」と検索してみてください。

 
 

フォントを読み込む

使いたいフォントが決まったら、フォント名の横にある赤いプラスボタンを押します。
(複数のフォントを選択することもできます。)


 

画面右下にある黒いタブをクリックして、ウィンドウを開きます。


 

ここに選択したフォントが用意されています。


 
 

フォントを読み込む場所は

  • HTML ファイルの head タグ内
  • CSS ファイル内

のどちらが一般的です。
* フォントファイルをダウンロードして使うこともできますが、ここではコピペだけで使える方法を紹介します。
 

head タグ内で読み込む場合は STANDARD のコード、CSS で読み込む場合は @IMPORT のコードを使います。


 
 

一般的なウェブサイトの場合

HTML の head タグ内に STANDARD のコードを貼り付けます。


 

HTML の例

<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>TITLE</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>

 
 

WordPress を使っている場合

WordPress の場合は、プラグインを使わないと head タグ内にコードを追加するのが難しいかもしれません。この場合は style.css に書くことができます。

style.css は、WordPress 管理画面の左側メニューの「外観 → テーマの編集」から開くことができます。
* 使っている WordPress テーマによっては「外観 → カスタマイズ」から CSS を追加できることがあります。


 

style.css を開いたら、WordPress のテーマ情報よりも後ろに @import のコードを追加します。


 

style.css の例

/*
Template: My Theme
Theme Name: theme-child
Author: Sara
Version: 1.00
*/
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

 
 

Android アプリで使いたい場合

 

【Android Studio】カスタムフォントを使用する方法 アプリ開発をしていると、デフォルトのフォントがアプリのイメージに合わなかったり、一部だけオリジナルのフォントを使いたいということ...

 
 

フォントを反映させる

フォントを読み込んだら、フォントを反映させます。

style.css などのスタイルシートを開いて、font-family のコードを貼り付けます。


 

例1)h2 タグにフォントを反映させたい場合

h2 {
    font-family: 'Roboto', sans-serif;
}

 
 

例2)ウェブサイト全体に反映させたい場合

body {
    font-family: 'Roboto', sans-serif;
}

 
 

まとめ

以上が Google Fonts の使い方でした。

まだ日本語フォントは数が少ないですが、ウェブサイトの英語や数字など一部分だけフォントを変えるのも雰囲気が変わって良いかもしれません。

ぜひお気に入りのフォントを使ってみてください🙂
 
 

【簡単3ステップ】Font Awesome の使い方 ここでは Font Awesome の使い方を簡単3ステップで紹介しています。 Font Awesom...

 

ABOUT ME
Sara
Sara
「わかりやすく・シンプル」をモットーに、携帯アプリ・ウェブアプリの作り方を紹介します。 独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています🙂

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です