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に貼付けます。

スポンサードリンク

おすすめの記事♪

【アンデッド】新曲、ボカロラップ公開しました。

私はIt is R! ラップ書いたのであーる! おやつはカール! YO! @It_is_Rです。 しばらくブログの更新ができませんでしたが、ようやく更新することができました。 やっと曲作りが

Blenderで3D美少女キャラの作り方。その7(横顔を綺麗にする)

[email protected]_is_Rです。 この記事は次回書こうと思っている後ろ髪の作り方に繋げる為の記事みたいなものです。 なので、同じ様に作っていきたい人のみ読んでいただ

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。ヘッダーをカスタマイズ。

寒くなってきましたね。皆さま前かがみになって[email protected]_is_Rです。 皆様がブログを見て、一番最初に目に入ってくるのはどこでしょうか? 殆どの場合、ヘッダー部分ですよね。つま

クローバPAGE

【クローバPAGE】知識ゼロでも超簡単にサイトを作れるサービス!!

[email protected]_is_Rです。 しかし、HTMLとか、CSSとかなにそれ?……という感じのひともいるでしょう。 そこで、今回は知識が全くなくても超簡単にWebサイトが作れ

RGB

Photoshopを使う上で必要不可欠。RGBとCMYKって何?

人生は山あり谷ありといいますが、下り坂しか無[email protected]_is_Rです。 今回はPhotshopなどのソフトを使う上で必要不可欠となる、RGBやCMYKについて

blender

Blenderで3D美少女キャラの作り方。その8(後ろ髪を描く)

モンスターボールって下ネタですか?@It_is_Rです。 はい、いきなり不愉快な思いさせてすいませんでした。 今回はBlenderで作る3D美少女キャラの、第8回目です。 前回は空いた空

blender

Blenderで3D美少女キャラの作り方。その9(顎と首を作る)

美少女よりもセクシーなおねえさんが好きです。@It_is_Rです。 いろいろなジャンルの記事を書いてるので、一つのジャンルの記事がおろそかになってしまいそうで怖い。もうなってるか? では、3D

少し早いですが、夏をイメージした曲を作りました。

暑い夏は嫌いですが、寒い冬も嫌いです。春も鼻[email protected]_is_Rです。 そんなこんなで、少し早いですが、夏の一曲制作しました。 夏といえばやっぱり海! てなわけで、海をイメ

gulp

gulpでsassをcssにコンパイル。インストール&便利な使い方。

[email protected]_is_Rです。 Webページを制作するとき、sassをcssに変換して使用することが多いと思います。 今回は、gulpを使ってsassをcssに

【初心者歓迎】クライアントサイドとサーバーサイドの違いを解説!!

[email protected]_is_Rです。 今回のテーマは、ちょっと細かいテーマですが、難しいこと考えずに気楽にいきましょう! 今回はクライアントサイドプログラムと、サーバーサイドプログ


コメントを残す

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


Category

Games