その他

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

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

-その他
-, ,

執筆者:


comment

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

関連記事

Fラン大から学歴ロンダを成功する方法 その①実績を作る

こんにちは、yassanです。今回は「Fラン大から学歴ロンダを成功する方法 その①」を紹介します。 この記事を読んでいる方は、学歴ロンダがしたいのかと思います。なかでも、「自分はFラン大学生だから学歴 …

研究発表のスライド作りのコツ【今すぐできる3つのコツ】

こんにちは、yassanです、今回は「研究発表のスライド作りのコツ【今すぐできる3つのコツ】」を紹介いたします。 研究発表のスライド作りって難しいですよね、どうやったら聞く側に興味を持ってもらえるか、 …

一人暮らしの在宅勤務にコスパ最強なデスク&チェア【Bauhutte & Hbada】

こんにちは、yassanです。今回は「一人暮らしの在宅勤務にコスパ最強なデスク&チェア【Bauhutte & Hbada】」を紹介します。 最近のコロナウイルスの影響から、在宅勤務をされる方が …

【Kindle Unlimited】僕がKindle Unlimitedを解約した理由【サブスク】

こんにちは、yassanです。今回は、僕がKindle Unlimtedを解約した理由を紹介します。Kindle Unlimitedを契約するに至った経緯から、メリットとデメリットが伝わったら良いなと …

【手順】GoToトラベル 事後申請準備してみた

※還付申請期間は8/14からです。 こんにちは、yassanです。今回は「【手順】GoToトラベル 事後申請準備してみた」について紹介します。 突然始まったGoToトラベルキャンペーンですが、申請方法 …

yassanさんのプロフィール写真

yassan
R&Dエンジニア。
新卒で大手の社内SEになったもののスキルアップのためにITベンダーに転職。
技術調査からプログラミングまで幅広くやってます。
趣味はバイクとガジェットと遊戯王カードです。