Wordpress

GoogleフォントをURLで読み込む方法-最新(2020/04/19現在)

  1. HOME >
  2. Wordpress >

GoogleフォントをURLで読み込む方法-最新(2020/04/19現在)

GoogleフォントをURLで読み込む方法

GoogleフォントをURLで読み込む方法

  • WordPressにGoogleフォントを読み込みたい。
  • Googleフォントのページ画面が変更されていて、最新の方法を知りたい。

ココがポイント

結論:

GoogleフォントをWordpressに取り込むには、

  1. 使用するフォントのURLを読み込む
  2. 使用するフォントに割り当てられているfont familyの値を指定する。

以上の手順で行います。

皆様こんにちは。ユウスケと申します。
日々の生活で役立つ情報を発信しています。

ユウスケ

WordPressで記事を書いていると使いたいフォントがでてくることもあるでしょう。

そこで、使用できるのがWeb上でフォント情報を読み込めるWebフォントです。

今回はWebフォントでよく使用されているGoogle fontsをURLを読み込んでフォントを登録する方法を解説していきます。

それでは説明してまいります。

 

1.Webフォントとは

Webフォントとは、Web上で公開されているフォントデータを引っ張ってきて自身のホームページで表示するフォントのことです。

このフォントを使用すると、閲覧者の環境に依存せずに表示したいフォントを表示できるようになります。

 

2.Googleフォントを登録する方法

Google

ココに注意

「Google fonts」Webページの画面レイアウトが変更されていることがあります。
この記事は、2020/04/19時点での最新のものになっております。

 

2.Step1 Googleフォントの検索窓から好みのフォントを選ぶ

言語を日本語で検索

皆様は、基本的に日本語をフォントとして、使用する機会が多いと思います。

そこで「Google Fonts」Webページの「Language」(使用する言葉)をプルダウンから選び、「Japanese」(日本語)にします。

すると、候補なるフォントが下にアイコンの状態で表示されます。

フォント名で検索するには上部にあるSearch」をつかいます。

 

2.Step2 フォント一覧から使いたいフォントを登録していく

好みの書体を選択  select this styleをクリック

今回は、「Noto Sans JP」を選択。すると、フォントの太さ違いのリストが出てくるので、すべてのリストの右横の「+Select this style」(このスタイルを選択)をクリックして右ウィンドウの「Review」に登録していきます。

 

2.Step3 URLとfont-familyを参照する

select this styleが変わり、reviewのところにfontが登録されます。embedに切り替え

登録が終わったらタブを「Embed」(埋め込み)に切り替えます。

 

上にURLが表示され、下にfont-familyの名前がでます

表示が切り替わると、上部にこのフォントのリンク先URLが表示され下部にこのフォントのfont family名が表示されます。

 

2.Step4 WordPressでフォントを登録する

後はそれぞれのwordpressのテーマにしたがって設定

後は、それぞれのWordpressのテーマのWebフォント登録画面の指示に従って登録すればOKです。

以上で終わりです。お疲れ様でした。

 

まとめ

お疲れ様でした。

今回は、Webフォントでよく使用されているGoogleフォントのURLを参照した登録方法をご紹介させていただきました。

ココがポイント

問題解決のステップ

  1. 好みのフォントを検索する。
  2. フォント一覧まで進み、「+Select this style」をクリックしていく。
  3. 画面右の「Review」タブを「Embed」タブに切り替える。
  4. 「Embed」タブの上部にこのフォントのURLリンクと、下部にfont family名が表示される。
  5. それぞれのWordpressのテーマの設定に従い、フォントを登録。

以上になります。

「Google fonts」Webページは、表示画面のレイアウトがアップデートによりかわることがあります。

今回は2020/04/19現在のもになりますが、Webページが更新されましたら、随時更新して確認できるようにしてまいります。

ご一読いただきありがとうございました。

Contact Form〈お問い合わせはこちらから〉

注目記事

MY BESTランキング

Webページ作成には必携!!

逆引きの見やすさが抜群!!

だから、

  1. HTMLのソースコード画面を読み取れる。
  2. 思い通りのCSSスタイルを調べられる。

是非、一冊手元にもってブログのレイアウトを自作しよう。

たった30分間を続ける重要性がわかる一冊!!

1日たったの30分間

けれども、
それが1週間、1ヶ月、1年となると
大きな差になる。

この本を読むだけで、
1日の生活の中の「たった30分間」の重要性がすぐにわかります。

勉強を始めるモチベーションになる一冊
是非、手元に!!

アフィリエイトならA8.net

最初のアフィリエイトにもってこいのASPです。

操作性がよく、
クリック率+EPCものっているので
初心者にとってありがたい仕組みになっています。

  • この記事を書いた人
  • 最新記事
YusukeMiyoshi

YusukeMiyoshi

Illustrator、Photoshopのテクニック。 WordPressのカスタマイズ についての記事が中心です。 よい本に出会えれば、ご紹介させていただきます。 Twitterのフォローお願いいたします。

-Wordpress

ユウスケの雑記ブログ
Thank you for your follow up.

Copyright© ユウスケの雑記ブログ , 2020 All Rights Reserved Powered by AFFINGER5.