GoogleフォントをURLで読み込む方法
- WordPressにGoogleフォントを読み込みたい。
- Googleフォントのページ画面が変更されていて、最新の方法を知りたい。
ココがポイント
結論：
GoogleフォントをWordpressに取り込むには、
- 使用するフォントのURLを読み込む。
- 使用するフォントに割り当てられているfont familyの値を指定する。
以上の手順で行います。
皆様こんにちは。ユウスケと申します。
日々の生活で役立つ情報を発信しています。
WordPressで記事を書いていると使いたいフォントがでてくることもあるでしょう。
そこで、使用できるのがWeb上でフォント情報を読み込めるWebフォントです。
今回はWebフォントでよく使用されているGoogle fontsをURLを読み込んでフォントを登録する方法を解説していきます。
それでは説明してまいります。
目次
1.Webフォントとは
Webフォントとは、Web上で公開されているフォントデータを引っ張ってきて自身のホームページで表示するフォントのことです。
このフォントを使用すると、閲覧者の環境に依存せずに表示したいフォントを表示できるようになります。
2.Googleフォントを登録する方法
ココに注意
「Google fonts」Webページの画面レイアウトが変更されていることがあります。
この記事は、2020/04/19時点での最新のものになっております。
2.Step1 Googleフォントの検索窓から好みのフォントを選ぶ
皆様は、基本的に日本語をフォントとして、使用する機会が多いと思います。
そこで「Google Fonts」Webページの「Language」（使用する言葉）をプルダウンから選び、「Japanese」（日本語）にします。
すると、候補なるフォントが下にアイコンの状態で表示されます。
フォント名で検索するには上部にある「Search」をつかいます。
2.Step2 フォント一覧から使いたいフォントを登録していく
今回は、「Noto Sans JP」を選択。すると、フォントの太さ違いのリストが出てくるので、すべてのリストの右横の「＋Select this style」（このスタイルを選択）をクリックして右ウィンドウの「Review」に登録していきます。
2.Step3 URLとfont-familyを参照する
登録が終わったらタブを「Embed」（埋め込み）に切り替えます。
表示が切り替わると、上部にこのフォントのリンク先URLが表示され下部にこのフォントのfont family名が表示されます。
2.Step4 WordPressでフォントを登録する
後は、それぞれのWordpressのテーマのWebフォント登録画面の指示に従って登録すればOKです。
以上で終わりです。お疲れ様でした。
まとめ
お疲れ様でした。
今回は、Webフォントでよく使用されているGoogleフォントのURLを参照した登録方法をご紹介させていただきました。
ココがポイント
問題解決のステップ
- 好みのフォントを検索する。
- フォント一覧まで進み、「＋Select this style」をクリックしていく。
- 画面右の「Review」タブを「Embed」タブに切り替える。
- 「Embed」タブの上部にこのフォントのURLリンクと、下部にfont family名が表示される。
- それぞれのWordpressのテーマの設定に従い、フォントを登録。
以上になります。
「Google fonts」Webページは、表示画面のレイアウトがアップデートによりかわることがあります。
今回は2020/04/19現在のもになりますが、Webページが更新されましたら、随時更新して確認できるようにしてまいります。
ご一読いただきありがとうございました。
