MENU

Google Fontsの使い方!初心者向けに手順を簡単解説!

目次

フォントをダウンロードして使用する

フォントをローカル環境(自身のPCやデザインソフトのみ)で使用したい場合は直接zipファイルでダウンロードできます。
手順は以下の通りです。

STEP1.検索ボックスに入力

検索ボックスに使用したいフォント名を入力します。
候補が出てくるので、使用したいフォント名をクリックします。

2.フォントを入手

「Get font」ボタンをクリックしてフォントを入手します。

3.フォントをダウンロード

「Download all」ボタンでzip形式でダウンロードがはじまります。

4.フォントをインストール

ダウンロードが完了したら、展開してttfファイルをダブルクリックし、インストールボタンをクリックするとフォントを入手できます。

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


Webフォントとして使用したい場合の手順は以下です。

1.検索ボックスに使用したいフォント名を入力します。
候補が出てくるので、使用したいフォント名をクリックします。

2.「Get font」ボタンをクリックします。

3.「Get embed code」をクリックします。

4.「Web」タブの「<link>」にチェックが入っている状態で、「embed code in the <head> of your html」にある「copy code」ボタンをクリックしてコードをコピーします。

5.コピーしたコードを自身で作成中のHTMLファイルに貼り付けます。
ペースト場所はheadタグ内です。

6.次にCSSもコピーします。
CSSは指定する部分だけで他は必要ありません。

7.今回はページ全体へ指定します。必要なタグのみの場合は適宜変更してください。
「font-weight」のみ指定を変更する必要があります。
お好みの太さで指定してください。

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