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】カスタムフォントを使用する方法(Javaコード編) アプリ開発をしていると、デフォルトのフォントがアプリのイメージに合わなかったり、一部だけオリジナルのフォントを使いたいということ...

 
 

フォントを反映させる

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

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


 

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

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

 
 

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

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

 
 

まとめ

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

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

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

【2019年12月更新】Font Awesome の使い方 Font Awesomeとは、簡単にアイコンを利用できるサービスです。 自分のウェブサイトに少しだけアイコンを使いたい...

 

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

 
独学でプログラミングを勉強するのは難しそう、効率的にプログラミングを学びたいという方はオンラインスクールがオススメです。

オンラインスクールを選ぶときのポイント

  • 無料体験があること
  • 個別サポートがあること

自分にあったスタイルを見つけるために、無料体験のご利用をオススメします。(無料体験後に自分には合わないなと感じたらハッキリ断ってしまって問題ありません。)
 
個別サポートもプログラミング学習に挫折しないために重要なポイントです。エラーや困った時にすぐに個別対応をしてくれるスクールを利用して下さい。

ここでは3つのオンラインスクールを紹介します。
全て無料体験がありますので、ぜひ自分に合ったスクールを見つけてみて下さい????
 

1. TechAcademy(テックアカデミー)

オンライン完結で勉強できるスクールで、コースがとても充実しています。チャットで質問すればすぐに回答を得られるのが一番のおすすめポイントです。
オリジナルのサービスやアプリの開発もサポートしてくれるので、開発したいものが決まっている人にもオススメです。

無料体験はこちら

2. CodeCamp(コードキャンプ)

一対一で受講できる個別指導のプログラミングスクールです。
Webデザイン・Webサービス開発・アプリ開発などを幅広く学習することができます。
マンツーマンなので自分のペースで学習できて、質問もその都度できるのがメリットです。

無料体験レッスンはこちら

3. Treehouse

英語でも良い、英語とプログラミングを同時に勉強したいという方は Treehouse がオススメです。月25ドルで始めることができて、たくさんのプログラミング言語を学ぶことができます。
個別サポートはありませんが、掲示板が充実しています。ほとんどの場合、質問してから30分程度で回答を得ることができます。

7日間の無料体験はこちら

COMMENT

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

CAPTCHA