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

スポンサードリンク

おすすめの記事♪

java

Javaのクラスとメソッドの違いとは?ゲーム風に解説。

この頃小説を読んでいなく、何か読みたいなと思[email protected]_is_Rです。 Javaを勉強し始めたばかりの人は、何やら難しい単語に混乱する人も多いでしょう。その中で、クラスとメソッドって一体何が

java

【Java】スーパクラス、サブクラスとは?継承について。

猿も木から落ちますが、Rは木から落ちません。だって登らないから。 @It_is_R です。いや、登ろうと思っても登れません。 Javaを使っていると継承という言葉をよく耳にしますよね。どういうも

HTML CSS

CSSで文字を、円の上下左右中央ド真ん中に表示する方法。

[email protected]_is_Rです。身長は171あります。 骨っていうなー! サイトを作る時、円形のパーツを作りたい時ってよくありますよね。画像を丸くして。。。なんてやっている人

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

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

Medibang Paint

MediBang Paint Proの使い方。4コマ漫画を描く8つの手順。

[email protected]_is_Rです。 さて、最近は本当にMediBang Paint Proが流行っているから凄いなと思っています。 そこで、今回はMediBang

bootstrap3

Bootstrap3でサイト制作するための、準備と初期設定。

ゲーム制作は順調にすすんでいます。このまま順調にいけば、今月か来月までには完成できそうで[email protected]_is_Rです。 さて、今回はBootstrap3によるサイト制作の入門講座です。 このBoo

blender

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

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

gulp

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

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

bootstrap3

Bootstrap3でサイトのレイアウト。グリッドシステムの使い方と裏技。

開発中のゲームはサイト制作に入っております。@It_is_Rです。 前回に引き続き、Bootstrap3の記事です。 サイトを作るとき、CSSなどを使ってサイトのレイアウトを調節したりしますが

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。文字の大きさを設定する。

[email protected]_is_Rです。 今回もFC2ブログの"最強"カスタマイズを始めていこうと思います。 今回は文字の大きさや色など、ブログ内の文字の設定をしていきます


コメントを残す

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


Category

Games