テクノロジー

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

投稿日:

こんにちは、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、きれいな見た目で使いやすくて最高ですね。
これからはどんどん積極的に使っていきましょう。

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

-テクノロジー
-, ,

執筆者:


comment

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

関連記事

【MySQL】Error Code: 1175. You are using…の対処方法

Error Code: 1175. You are using safe update mode and you tried to update a table without a WHERE tha …

Route53とは?学んだことをまとめてみた【初心者エンジニアのAWS備忘録③】

こんにちは、yassanです。今回は「Route53とは?学んだことをまとめてみた【初心者エンジニアのAWS備忘録】」を紹介いたします。 今回ご説明するRoute53は、VPCや EC2に比べて前提と …

AWSに登録したら数日後「AWS Free Tier limit alert」というメールが来た【対処方法のスクショ付き】

こんにちは、yassanです。今回は「AWSに登録したら数日後「AWS Free Tier limit alert」というメールが来た【対処方法のスクショ付き】」を紹介します。 AWSを始めて早数日、 …

VPCとは?学んだことをまとめてみた【初心者エンジニアのAWS備忘録①】

こんにちは、yassanです。今回は「VPCとは?学んだことをまとめてみた【初心者エンジニアのAWS備忘録】」について紹介します。 「AWSを初めたらまずはVPCを構築してみよう」みたいなのをよく見か …

ElasticIPアドレスとは?学んだことをまとめてみた【初心者エンジニアのAWS備忘録⑤】

こんにちは、yassanです。今回は「ElasticIPアドレスとは?学んだことをまとめてみた【初心者エンジニアのAWS備忘録⑤】」を紹介します。 AWSでは、Elastic IP と言う概念が登場し …