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

スポンサードリンク

おすすめの記事♪

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

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

Ameba customize

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

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

Homebrew

Homebrewを使いこなせ!Macへのインストールや使い方。

[email protected]_is_Rです。 やり直したところで同じ道を辿るのがオチですよ、全国の不幸な皆さん!! さて、おふざけはここまでにして、今回はHomebrewにつ

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

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

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

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

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

WordPress

無料で広告なしのWordPressサイトを立ち上げる方法。

猫を飼っています。でも犬派です。何か文句ありますか? …まぁ、最終的に動物全般が好きなんです。爬虫類から哺乳類、鳥類まで好きです。動物を飼って[email protected]_is_Rに送り付けて下さい。

blender

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

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

Android アプリ開発入門! Android Studio のインストール手順。

人の笑顔が大嫌い。 @It_is_R です。 Android アプリ開発では、 Eclipse や Android Studio を使ってアプリを開発するのが一般的です。 一般的に言語は Ja

blender

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

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

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

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


コメントをどうぞ!

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




Games