この記事は3分で読めます

Google Fontsの使い方

  • 投稿日
  • 更新日

あとで読む

Google Fontsの使い方

今回は「Google Fonts」について解説します。

フォントメーカーのフォントは高くて手が出ない方、使い勝手のいいwebフォントを探している方、そもそもフォントをPC標準インストールのものしか使ったことがないという方は、この記事を読んでみて是非Googleフォントを使ってみてください!

イッパイアッテナ

はじめまして、イッパイアッテナです。

ITと教養で、優秀なネコの手となり、あなたのあらゆる問題を解決します。あなたの相談役だったり、デザイナーだったり、広報だったり、わたしたちは”イッパイ”の顔をあなたに見せることができます。

Google Fontsってなに?

Google Fontsとは、Googleが提供するwebフォントサービスです。

提供されているフォントは1400以上(そのうち日本語フォントは50くらい)と、類似サービスのAdobe Fontsより少なめですが、誰でも商用・非商用にかかわらず無料で使えることが特徴です。

webサイトにGoogle Fontsのwebフォントを使っておけば、どのPCから閲覧しても正しく表示される使い勝手の良さも魅力の一つだと言えます。

Google Fontsの使い方

Google Fontsの使い方は主に2種類あります。自分のPCのアプリケーション上でフォントを使うなどのローカル環境で使用する場合とwebサイト上でフォントを表示させるwebフォントとして使用する場合です。

ローカル環境で使用する

ローカル環境で使用するには、フォントをGoogle FontsからPCにインストールする必要があります。その手順を解説します。

STEP
Google Fontsにアクセスする

こちらからGoogle Fontsにアクセスします。

STEP
フォントを検索する

検索窓にフォント名を入力するか、カテゴリー・言語・プロパティの3つでソートをかけて検索します。

STEP
フォントを選ぶ

フォントが表示されている枠内をクリックします。

STEP
「Download family」をクリックする
STEP
ダウンロードされたファイルを開く

zip形式のファイルがダウンロードされるので、解凍した上でファイルを開きます。

STEP
otfファイルを全て開く

txtファイルが入っていますが、otfのみで大丈夫です。

otfファイルを全選択した状態で右クリック→開くで一気に開くことができます。

STEP
フォントをインストールする

これでインストールできました。各アプリケーションでフォントが使用できます。

webフォントとして使用する

webサイトでwebフォントを有効にするにはHTMLやCSSにソースコードを記述する必要があります。Google Fontsではソースコードも用意してありますので、ソースコードの入手方法を解説します。

STEP
フォントを選ぶ

Google Fontsへのアクセスからフォントを選ぶまでの手順は先述しているので割愛します。

STEP
欲しいウェイト(太さ)を選ぶ

選択したフォントのページを下にスクロールするとウェイト一覧が出てきます。

その中から欲しいウェイトの右端にある「+」マークをクリックします。

欲しいフォントが複数ある場合はSTEP1〜2を繰り返します。

STEP
選択したフォント一覧を見る

フォント・ウェイトを選び終わったら、右上のアイコンをクリックします。

STEP
出てきたウィンドウの下部にあるソースコードをコピペする

HTMLにコピペするソースコードとして、<link>タグと@importが用意してあります。自分の用途に合わせて選んでください。

CSSにコピペするソースコードはHTMLのソースコードの下にありますので、CSSファイルにコピペしてください。

これでwebサイトでフォントを表示することができます。

おわりに

Google Fontsの使い方について解説しました。導入する手順も難しくなく、無料で使えるというなんともありがたいサービスです!

使ったことがない方は是非使ってみてください。

この記事を書いた人

なしょ
なしょ

野球とカメラとスノボとゲームと…好きなものが多くて困ってます。 が、新しい世界へのお誘いもお待ちしています!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

Web制作について相談してみませんか?

必須は必須項目です。弊社へお問い合わせいただく方は、下記の「個人情報の取り扱いについて」を必ずお読みください。

会社名

任意

お名前

必須

メールアドレス

必須

電話番号

任意

お問い合わせ内容

必須