NEWS

【まとめ】 おすすめのgoogleフォント12選

2017.02.10  Wrote by Toyoaki Notazawa

google fontのすすめ

 

こんにちは、クラウドットデザイナーの野田沢です。

今回は超個人的なおすすめgoogle fontを紹介しようと思います。
ここ数年でwebフォントを使用するのが当たり前になりましたよね。
欧文タイトルを使用する時など、どんなwebフォントを使用するかでそのwebページの印象がガラッと変わってきます。

誰もが知ってるgoogle fontは商用利用ができ無料かつ、とっても簡単な導入方法で誰でもお手軽に様々なフォントが利用できるとってもすばらしいサービスです。
種類も豊富なので選ぶのも楽しいですよね。

というわけで私個人の独断と偏見でチョイスしたgoogle fontをいくつか紹介します。

 

serif系 フォント

serif系フォントは個人的に太いフォントは野暮ったく見えてしまう印象があるので、regularウェイトで細めのフォントをチョイスしました。

Abhaya Libre


https://fonts.google.com/specimen/Abhaya+Libre

 

Andada


https://fonts.google.com/specimen/Andada

 

Cormorant


https://fonts.google.com/specimen/Cormorant

 

Crimson Text


https://fonts.google.com/specimen/Crimson+Text

 

Esteban


https://fonts.google.com/specimen/Esteban

 

Old Standard TT


https://fonts.google.com/specimen/Old+Standard+TT

 

san-serif系 フォント

an-serif系は「主張しすぎず、だけどちゃんとアクセントになるような」をテーマにチョイスしました。

 

Asap


https://fonts.google.com/specimen/Asap

 

Athiti


https://fonts.google.com/specimen/Athiti

 

Nunito


https://fonts.google.com/specimen/Nunito

 

Roboto


https://fonts.google.com/specimen/Roboto

 

Strait


https://fonts.google.com/specimen/Strait

 

Ubuntu Condensed


https://fonts.google.com/specimen/Ubuntu+Condensed

 

goolg fontの使い方

使い方は本当にとっても簡単!あっという間です!

 

1. フォントをチョイス

当然ですがまずは使いたいフォントを決めましょう!
種類もたくさんあり、中には似たようなフォントもいくつかあるので、一度最後まで見てみるのをオススメします。

 

2. プラスマークでフォントを追加

使いたいフォントをクリックすると詳細ページに遷移します。右上にあるプラスマークをクリックしてフォント追加しましょう。

 

 

一度追加したフォントはあとから消せるのでとりあえず追加しておくのもありかもしれません。
ちなみに詳細ページではなく一覧ページからでも追加できますよ。

 

3. コードを取得

追加したフォントは右下にあるボックスに追加されています。ここに使用コードがでるのであとはコピペするだけ!

 

 

html・cssとお好きな方でお使いください。

私はcss派です。

複数のフォントをまとめて追加もできます。

また、ウェイトが複数あるフォントはウェイトも選べますよ。

コンテンツに合ったフォント選びをすることでwebサイト全体のクロリティは確実に良くなります。googleフォンはあまり使ったことがないという方も是非使ってみてください。

それではまた。

その他の記事を見る