Other

3分で分かるGoogle Fontsの使い方【初心者向け】

投稿日:2020年3月5日 更新日:

こんにちは、yassanです。
今回は、3分で分かるGoogle Fontsの使い方【初心者向け】をご紹介いたします。

WebページやWebアプリケーションを作る際に、標準のフォントだとどうしても味気がないですよね。
そんなときに、Google Fontsを使うと、WebページやWebアプリケーションの外観がとてもいい感じになります。

Google Fonts とは?【概要】

Google FontsはあのGoogle先生が提供しているサービスです。
まずは、こちらの公式ページをご覧ください。

様々なフォントがありますね。
なんと、日本語もいくつかある様子です。
Aboutを見てみると、2020年3月現在は135以上の言語で使用されるフォントが用意されてるみたいです。

これらのフォントは無料で使うことができます。
さすがGoogle先生。

Google Fontsを使ってみよう【使い方】

では、実際にGoogle Fontsを使ってみましょう。
難しくありません。めっちゃ簡単です。

先程のページから使いたいフォントを選びましょう。
これだというのが決まったら右上の+ボタンをクリック。

このようなダイアログが出てくるのでクリックして拡大します。
EMBED > STANDARD の中のコードをコピーします。
そしたら、それをhtmlのコードに貼り付けます。

今度は、EMBED > @IMPORT の中のコードと、Specify in CSSをコピーします。

そしたら、それをcssのコードに貼り付けます。

以上です。こんな感じになります。

beforeはこんな感じ。全然違いますね。

まとめ

いかがでしたでしょうか。
Google Fonts、きれいな見た目で使いやすくて最高ですね。
これからはどんどん積極的に使っていきましょう。

読んでいただき、ありがとうございした!

-Other
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

【梅雨】紫陽花の名所、三室戸寺へ行ってきた【2020】

こんにちは、yassanです。今回は「【梅雨】紫陽花の名所、三室戸寺へ行ってみた【2020】」を紹介します。 梅雨真っ盛りですね。土日だけピンポイントで雨が降るのは本当勘弁して欲しいです笑 そんな梅雨 …

【転職活動】Word/Excelを使わず無料で書類を作成する方法【履歴書】

こんにちは、yassanです。今回は「【転職活動】Word/Excelを使わず無料で書類を作成する方法【履歴書】」を紹介します。 皆さん、転職活動してますか?転職活動を進めるうえで、応募書類を用意する …

プロテインがダマになる時の超絶簡単な対処方法

こんにちは、yassanです。今回は「プロテインがダマになる時の超絶簡単な対処方法」を紹介します。 プロテインといえば、一昔前はマッチョを目指す人のための筋肉増幅食品といった立ち位置でした。最近では、 …

【硬水&軟水】定番の海外飲料水3種比較してみた【レビュー】

こんにちは、yassanです。今回は、海外旅行でも国内生活でも定番となっている三種類のナチュラルミネラルウォーターについて、レビューしたいと思います。人体の構成要素として非常に重要な「水」、あなたも自 …

海外旅行初心者ならプリペイドSIM「Three」がおすすめ【経験談】

海外旅行の準備、初海外、携帯回線はどうしようかな?WiFiかな?なるほど、プリペイドSIMというのが良いらしい、どのプリペイドSIMにしようかな読者が抱える問題:プリペイドSIMにしようと思ったけどど …