Google Fontsの使い方。サイトをカッコよくしよう。

公開 :

Webページを作るのは結構好きな@It_is_Rです。

WordPress、もしくは他のホームページやブログをやっていると、フォントを変えたいなと思うことも多いと思います。
そこで、Google Fontsを使ってみましょう。Google Fontsは、厄介な登録もなく、簡単に使うことができます。

今回はGoogle Fontsを使う方法をご紹介します。

 icon-eye Google Fontsについて。
Google Fontsを使うと、簡単にWebページにカッコいいフォントを使うことができます。
しかし、日本語フォントが少ないこと、フォントの読み込みには時間がかかることを考えると、英語でWebページをデザインしたい時のみ使用すると効果的にWebページをカッコよくできると思います。

Google Fontsからフォントを探す。

まず、Google Fontsから、自分の好きなフォントを探してみましょう。
Google Fontsのページはこちらです。
Google Fonts

フォントの検索。

では、まずフォントを検索する方法です。
フォントの検索は、ウィンドウ左端のこの画面から検索できます。しかし、この検索はフォントの名前が分からないと検索のしようがありませんね。
Google Fonts

フォントを絞り込む。

その場合は、フォントを絞り込むことができます。
「All categories」の右側にある▼をクリックしてみましょう。すると、どのようなフォントが欲しいのか選択できるようになります。
Google Fonts

また「Thickness」「Slant」「Width」で、「太さ」「傾斜」「横幅」を絞ることができます。
これらの設定は、「Resrt all filters/search」で解除することができます。

フォントを選ぶ。

では、続いてフォントを選んでいきましょう。
Google Fonts

フォントの表示方法を変える。

上部にあるタブから、表示方法を切り替えることができます。
google-fonts5

「Word」を選択した場合、ほぼ単語ごとの表示を確認することができます。
「Sentence」を選択した場合、1つの文が表示されます。
「Paragraph」を選択した場合、文章が表示されます。
「Poster」を選択した場合、フォントの名前が、ロゴのようにそのフォントで表示されます。

また、「Word」「Sentence」「Paragraph」を選択した場合は、表示させる内容を切り替えることができます。
「Preview Text」と書かれた部分の▼をクリックすると一覧が表示されます。
Google Fonts

「Enter your own text」を選択すると、枠内に自分が入力したテキストを表示させることができます。
「Font Name」を選択すると、フォントを名前がそのフォントで表示されます。
「Grumpy wizards make toxic brew for the evil Queen and Jack.」を選択すると、この文章が表示されます。
「The quick brown fox jumps over the lazy dog.」も同じで、この文章が表示されます。
「AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz 0123456789」は、Aからzまでと数字が表示されます。

実際にフォントを使う。

いよいよ実際にフォントを使ってみようと思います。

それぞれのボタンの機能について。

それぞれのフォントの覧に、このようなボタンがあると思います。
ちなみにこのボタンは「Sentence」を選択している状態のものです。選択しているタブによって、①が無かったりします。
Google Fonts

①(See all styles)は、下の画像の様にすべてのフォントスタイルを表示させることができます。
Google Fonts
②(Quick-use)をクリックすると、そのフォントをすぐに使い始めることが可能です。使い方は後ほど解説する「コードをページに貼付ける」を見てください。
③(Pop out)をクリックすると、さらにフォントを内容を詳しく、別ウィンドウで確認することができます。
④をクリックすると、そのフォントをとりあえず保存しておくことができます。ここで保存しておいて、後でまとめて確認したり使うことができます。

フォントを選び、コレクションに追加する。

先ほどの画像の④をクリックすることで、そのフォントをコレクションに追加することができます。
すると画面下部のCollectionに入っていきます。使いたいフォントを選び、もし使わないフォントがあれば、右端の×ボタンで削除します。
Google Fonts

「Use」をクリックすると、選んだフォントをすべて使うことができます。
すると、フォントの選択や貼付ける為のコードが表示されます。

コードをページに貼付ける。

表示された画面で、使いたいフォントを選択します。
Google Fonts

画面をしたにスクロールさせると、コードが表示されます。
Google Fonts

この「3. Add this code to your website:」と書かれた部分のコードをコピーして、自分のWebページの、<head>と</head>の間に貼付けます。
その後、「4. Integrate the fonts into your CSS:」の部分をコピーして、自分のWebページのCSSに貼付けます。

スポンサードリンク

おすすめの記事♪

blender

Blenderで3D美少女キャラの作り方。その4(前髪と横髪を描く。)

Blenderでの3Dキャラ制作の記事、長い期間放置して[email protected]_is_Rです。 前回までのキャラ作成は、顔ができたところまででした。 今回は。髪の毛を作っていきます。 さて、Bl

WordPress

WordPressカスタマイズ。テンプレートのファイル構成をチェック。

二兎を追う者は一兎をも得ず。でも、三兎を追えばそのうちの一兎ぐらい得られるんじゃ無いかと[email protected]_is_Rです。やかましいわ。 今回の記事は初のWordPre

wordpress

WordPress – デフォルトで用意されたショートコード一覧と使い方。

昔は WordPress の画面が真っ白になって、頭も真っ白になったこ[email protected]_is_Rです。 WordPress では、プラグインを使ったりしない限り、投稿記事のなかで php

Ameba customize

アメーバのOwndで、無料で超簡単にホームページ作ってやろうぜ!!

[email protected]_is_Rです。 ホームページを作成するには、まずHTMLを使う能力、若しくはソフトが必要になります。 さらにサーバーを借りなくてはなりません。するとお金がかかったりします。 では

宇宙一分かりやすい JavaScript のかなり詳しい基本の解説。

宇宙一分かりやすい JavaScript のかなり詳しい基本の解説。

[email protected]_is_Rです。 今回は JavaScript について、初心者の人にも分かりやすく、丁寧に解説していきます。 JavaScript と EcmaSc

上海

上海ガール、イラスト描きました!

[email protected]_is_Rです。 芸術の世界はとても厳しいと痛感しております。 さて、芸術の世界では自分をアピールすることが必要となってきます。その為には、自分の作品をたくさ

CSS Button

サイト制作に!!CSSでマウスオーバーボタンの作り方。

新年初の記事です。とりあえず、あけましておめ[email protected]_is_Rです。 お正月……おそーがつ……おそまつ……おそ松さん。新年早々くだらないこと言ってないで早く記事を書けって話ですね。

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。背景を変更する。

三度の飯よりも好きなものが多すぎて比較になら[email protected]_is_Rです。 FC2ブログ"最強"カスタマイズ入門講座の続きですね。最強にカスタマイズしていきましょう。 今回は背景色の変更をメインに

Blenderで3D美少女キャラの作り方。その6(耳を作る。)

[email protected]_is_Rです。 もちろん記事書きながら今から作っていきます。 今回は耳を作っていきます。 耳は髪の毛でどうせ隠れてしまうかもしれませんが、とりあえず。 こ

Illustratorでオブジェクトを均等に並べる超簡単な2つの方法。

ロゴなどを制作する上でほぼ必要不可欠となっているIllustratorですが、この機能を完全に使い果た[email protected]_is_Rです。 今回は、オブジェクトを均等に並べる方法を


コメントを残す

メールアドレスが公開されることはありません。


Category

Games