その他

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

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

関連記事

ブログを書くのに最適なデバイスはiPad Proです。

こんにちは、yassanです。今回は「ブログを書くのに最適なデバイスはiPad Proです」を紹介します。 これからブログを始めるぞと言う方、始めるにあたって色々決めることがありますよね。「どう言うテ …

【iPhone】通知マークがうざい時の対処方法

こんにちは、yassanです。今回は「【iPhone】通知マークがうざい時の対処方法」を紹介します。 「iPhoneの通知がいつまでも残って鬱陶しいな…」「通知を消すためにアプリを一々開く …

キャッシュレス時代に最適な財布【FRANK GELARD】

こんにちは、yassanです。今回は「キャッシュレス時代に最適な財布【FRANK GELARD】」を紹介いたします。 昨今、キャッシュレスがかなり浸透してきました。現金を持つ機会が少なくなり、折り畳み …

オフハウス&ハードオフで様々な不用品を売ってみた【買取価格参考】

こんにちは、yassanです。今回は「オフハウス&ハードオフで様々な不用品を売ってみた」結果を紹介いたします。 オフハウスやハードオフに持っていくようなものって、大きかったり電子機器だったりで運ぶのが …

オンライン飲み会におすすめのビデオ通話アプリ2選【LINE / Google Duo】

こんにちは、yassanです。今回は、「オンライン飲み会におすすめのアプリ2選」を紹介します。 皆さんは、オンライン飲み会をやったことがありますか?昨今のコロナウイルスの影響で、外出自粛が広まっていま …

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

yassan
インフラエンジニア。
独学でインフラ・クラウドについて学んでいます。
大阪 / 20代後半 / 決闘者 / FE / AWS-SAA

twitter: @yassan10787859