小学館IDをお持ちの方はこちらから
ログイン
初めてご利用の方
小学館IDにご登録いただくと限定イベントへの参加や読者プレゼントにお申し込み頂くことができます。また、定期にメールマガジンでお気に入りジャンルの最新情報をお届け致します。
新規登録
人気のタグ
おすすめのサイト
企業ニュース

文字の表示を自分好みに変えられるって知ってた?Googleフォントの便利な使い方

2019.09.09

Googleが提供する多種多様なサービスの中でも、いま注目度が高いものが「フォント」の提供だ。MSゴシックや明朝体をはじめ、多くのフォントが世に出ており、各々に特徴がある。そしてGoogleフォントは、デザイナーやエンジニア以外でも手軽に使用できる点が魅力。パソコンにダウンロードしたり、制作物やブログ・ホームページ作成などで活用できる。ここではGoogleのフォントの基礎知識について紹介する。

Googleが提供するフォントは無料で使用できる!

Googleから提供されているフォントは、インターネットサイトをはじめWebブラウザ上で表示される、いわゆる「Webフォント」と呼ばれるものだ。これらは無料で提供されており、コードをコピー&ペーストすればブログやホームページ作成などで活用できる。また、ダウンロードをすれば、パソコンに取り込んでWebサービス以外で使用したり、Photoshop等のアプリケーションで活用することも可能だ。

Googleフォントを利用するメリットとは?

Googleフォントはもともとプログラミング用であり、エンジニアたちが開発時に見やすいように作られ提供されたものだったという。

サイトやブログを作る時、制作者が表示されるフォントを特定のものに指定したとしても、全てのユーザーの端末にそのフォントが表示されるとは限らない。制作者が指定したフォントを見られるのは、そのフォントがインストールされた端末を持っている人のみだ。例えば制作者が「明朝体」を指定しても、そのサイトを閲覧するユーザーの端末に明朝体がインストールされていなければ、別のフォントに置き換えて表示されてしまう。Webブラウザ上で表示されるフォントがバラバラだと、ユーザーによっては文字が見にくく感じることもある。そこで開発用に作られたGoogleフォントが、一般向けに提供されるようになったというわけだ。

一方、GoogleフォントのようなWebフォントを使用すれば、サーバ上に置かれたフォントを呼び出して表示する方式になるので、どの媒体から見ても同じフォントになり、画面のレイアウトが崩れにくい。一方で、そういった特性ゆえにGoogleフォントを利用すると情報量が多くなる。情報量が多いということは、表示に時間がかかってしまうということだ。

Googleフォントの利用方法

それでは、Googleフォントの基本的な利用方法を紹介しよう。

[1]Googleフォントにアクセスして、使用したいGoogleフォントの右上にある「+」アイコンをクリック(※選択すると「-」表示になる)。
[2]画面下に「Family Selected」と表示されるので、そこをクリック。
[3]選択したフォントの設定ウィンドが開く。初期設定では通常のサイズのフォントしか使わない設定になっているため、太字や斜体も使いたい場合は「CUSTOMIZE」タブで選択しよう。
[4]表示されたコードをコピーし、HTMLの<head>にペースト。CSSでフォントを指定する(Specify in CSSに表示されたものを使用すればOK)。

GoogleフォントをPCにダウンロードする方法は簡単!

[1]~[3]は前述した「Googleフォントの利用方法」と同じ。
[4]設定ウィンド右上の矢印(↓)のアイコンをクリックすれば、ダウンロード開始。完了したら、自分のパソコンにフォントを追加すればOKだ。アプリケーションで使用する場合は、アプリにインストールすれば良い。

検索画面の便利な使い方

Googleフォントの検索画面では、各フォントのサイズや太さを変えて表示することもできる。また、表示される文言を任意のものに変更することも可能だ。各フォントの「Sentence」のタブを「Custom」にして文字を入力し、さらに「APPLY TO ALL FONTS」をクリックすれば画面に表示されている全てのフォントの文言を一括で変更できる。

スタンダードな「Google font Serif」とは?

Serif(セリフ)系のフォントの最大の特徴は、文字小さな飾りが付いていることだ。各文字の先端に少しだけヒゲが伸びているように見える。縦線と横線の幅が異なるため、文字にメリハリが出て読みやすい。

【参考】デザイナーが選ぶ好きなフォントランキングTOP10

欧文フォントの代表格「Google font Garamond」

Garamond(ギャラモンやガラモンと読む)もSerifフォントと同様に、欧文フォントの代表格だ。可読性が優れているため、多くの場面で活用される。

【参考】プレゼンの成功はフォントで決まる!モリサワに聞くフォント選びのコツ

Googleフォントは日本語にも対応! 続々と種類も増える見込み

Googleから提供されているフォントは、日本語に対応したものがなかなか出なかったが、2018年9月にやっと正式にサポートされるように。今後ますます種類が増えるはずだ。

Googleフォント日本語対応版をダウンロードしてみよう

日本語版のGoogleフォントを探すには、検索画面の「Language」タグで「Japanese」を選択して検索するといい。検索結果に日本語フォントの一覧が出てくるので、あとは先述した流れでダウンロードできる。

Googleフォント日本語対応版の使い方は簡単!

Googleフォントの日本語対応版の使い方も、先ほど説明した通り。利用したいフォントのコードをHTMLにコピペしたり、ダウンロードしたフォントを追加登録するだけだ。OSやアプリによって追加・設定方法は異なるが、しっかりと説明を読んで手順を踏めば問題なく利用できるだろう。

Googleフォントが反映されない!? 困った場合の対処法

Googleフォントが表示されない場合は、HTMLやCSSの記述に問題がないか見直したり、PCにダウンロードした場合は以下の方法で対処できる可能性が高い。OSの種類やWebブラウザの種類、バージョンによって対処法は異なるが、ここでは最も簡単で効果的な方法を紹介しよう。

1つ目は、対象のアプリやソフトを再起動すること。2つ目は、対象のフォントを再度ダウンロードして再設定を行うこと。そして3つ目は、対象端末の再起動。いずれかの方法で、フォントが認識されない状態を解消できる可能性がある。

2019年9月現在、900種類以上ものフォントが公開されている。日本語に対応しているフォントも今後増えることが予想されるので、ぜひ好きなフォントを見つけて活用してほしい。同じ文章でも、フォントを変えるだけで、読みやすさが変わってくるだろう。現状のブラウザがちょっと見にくいなと感じている人や、自身のサイトや制作物を華やかに見せたい人は、ぜひインストールに挑戦してほしい。

※データは2019年8月末時点での編集部調べ。
※情報は万全を期していますが、その内容の完全性・正確性を保証するものではありません。
※製品・サービスのご利用、操作はあくまで自己責任にてお願いします。

文/ねこリセット

@DIMEのSNSアカウントをフォローしよう!

DIME最新号

最新号
2024年4月16日(火) 発売

DIME最新号は「名探偵コナン」特集!進化を続ける人気作品の魅力、制作の舞台裏まで徹底取材!

人気のタグ

おすすめのサイト

ページトップへ

ABJマークは、この電子書店・電子書籍配信サービスが、著作権者からコンテンツ使用許諾を得た正規版配信サービスであることを示す登録商標(登録番号 第6091713号)です。詳しくは[ABJマーク]または[電子出版制作・流通協議会]で検索してください。