1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. CSS
  6. »
  7. Google Fontsの使い方。サイトをカッコよくしよう。

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

スポンサードリンク

関連コンテンツ

オススメ記事

クイックタグ

【WordPress】クイックタグを編集し効率よく記事を書こう!

WordPressで記事を投稿するとき、クイックタグを使うと便利です。 デフォルトで用意されているクイックタグもありますが、それだけでは少々不便なところもあります。 今回は効率よく記事を書くた

WordPressカスタムヘッダーを完璧に使いこなしたい人へ告ぐ!

森の中に昔から住んでる@It_is_Rです。 WordPressのカスタマイズをする上で、カスタムヘッダーを使うと、色やヘッダー画像をWordPressの管理画面から操作できるようになり便利です

カスタムロゴの使い方。 WordPress サイトのタイトルを画像に変更!

笑いたい時に笑えず、笑っちゃいけない時に笑えてくる@It_is_Rです。 WordPress テーマ自作シリーズ第9回目となります。 今回はカスタムロゴの使い方を紹介したいと思います。

enchant.js

ゲームに背景画像を表示する方法!( enchant.js )

こんばんわ、@It_is_Rです。 ゴールデンウィークいかがお過ごしでしょうか。 今回は、 enchant.js を使った横スクロールアクションゲームの背景を表示してみようと思います。 空と

wordpress

WordPress にウィジェット(サイドバー)を追加する方法。

サイドバーというより、頭がパーな@It_is_Rです。やかましいわ。 WordPress テーマ自作シリーズ、早くも第6回目です。 今回はウィジェット(サイドバー)を追加する方法を紹介します。

【Android Studio】 GridLayout の使い方。複雑なレイアウトを表現する方法

スマホの充電がいつの間にか無くなっている@It_is_Rです。 Androidアプリ開発、10回目となりました。 前回、様々なレイアウトの使い方を紹介しましたが、今回はその中でもちょっと難しい

webpackの設定ファイル「webpack.config.js」の使い方を覚えよう

webpack.config.jsはwebpackを使う上での設定ファイルです。 今回は、webpack.config.jsの使い方を紹介します。 webpack.config.jsとは

JavaScriptマンガ講座。初心者でも痛いほど理解できる変数の使い方。(実践編)

押入れが部屋になっている@It_is_Rです。 今回の記事はJavaScriptマンガ講座、2回目となりました。 この企画はJavaScriptをフザケまくって覚えようというものです。

【Bootstrap 4】ボタングループ使い方。ボタンの一まとめにする方法

Bootstrap4の使い方、第6回目です。 前回、Bootstrap4でのボタンの作り方を紹介しましたが、今回はそのボタンをグループにしてひとまとめにする方法です。 Bootstrapにはボ

【Android Studio】じゃんけんゲームの作り方(アプリ開発の基本)

限りなくじゃんけんが弱い@It_is_Rです。 Androidアプリ開発、11回目となりました。 そろそろ何かアプリを作ってみたいですよね。基本は大事ですが、一番つまらないですね。 そこ

コメントをどうぞ!

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