AI
Business
こんにちは、クラウドットデザイナーの野田沢です。
今回は超個人的なおすすめ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フォンはあまり使ったことがないという方も是非使ってみてください。
それではまた。
