Google Web フォントのダウンロードから活用方法まで紹介するよ!

Google Web フォントのダウンロードから活用方法まで紹介するよ!

 

どうもダサうぇぶです。

今日はGoogle Web フォントについての記事を書きます。

本題に入る前に、フォントの重要性について少し語ろうと思います。

web関係の仕事している方ならwebサイトやバナー作りの際に、どのフォントを使ったら良いか?迷った経験はありませんでしょうか?

せっかく綺麗なレイアウトを組み、クオリティが高い写真を使ってもフォント選びのセンスが悪いとデザイン自体にまとまりがなくなってしまいます。

webサイトを作る上で、フォントはとても重要な役割を持ちます。

「読みやすいフォント」「フォントの種類」「フォントの配置」などを工夫することで、見る人を惹きつけるwebサイトを作ることができるのです。

例えば下の画像を見てもらいたい。

 右と左の画像は文章の内容は同じだが、それぞれ違うフォントを使用しています。

見比べてみてどうでしょうか?それぞれ違った印象を感じることと思います。

左はポップな感じでどこか楽しそうなイメージ。

右は高級感を漂わせ洗練されたイメージ。

それぞれ書いてある内容は同じだけど、フォントの種類が違うだけで読み手に与える印象は異なります。

このことからフォントはデザインの一部といえるでしょう。

web制作の仕事をしていく上でこのことを意識することが大事だと思います。

さて前置きが長くなりましたが、今日の本題である「 Google Web フォント 」についてお話ししましょう。


Google Web フォントとは?

Google Web フォントとは、Googleが提供する「Webフォントサービス」のことを指します。

では、Webフォントとはどういったものか?

簡単に説明するとサーバー上に置いてあるフォントファイルのことを指します。

このフォントファイルを使うことで、ユーザー環境を選ばず(WindowsやMac・スマートフォンやタブレット)など、どの端末からwebサイトを閲覧しても同一のフォントを表示できるようになりました。

WindowsやMacでは標準でインストールされているフォントの種類が異なります。

その状態で通常のwebサイトを閲覧するとそれぞれのPCにインストールされているフォントが適用される仕組みになっています。

最近、Webフォントサービスが使われるようになってからは、デザイナーの意図したフォントを表示できるようになった為、デザインの幅が広がりオシャレなフォントを使用したサイトが作れるようになりました。

Google Webフォントのメリット・デメリットについて

Google Webフォントのメリットは?

・Googleが提供しているフォントなので安心して使える
・無料で使える
・PCにダウンロードして使えるのでフォント収集にも最適
・オシャレな英語フォントが見つけられる
・とにかくフォントの種類が豊富
・他のサイトとの差別化が図れる
・デザインの幅が広がる
・どの端末から見ても同じ見た目で表示できる

Google Webフォントのデメリットは?

・フォントの容量によっては読み込みに時間がかかりサイトが重くなる
・日本語未対応
・種類が多すぎて気に入ったフォントを探すのが大変
・対象のフォントがサーバー上から消えると表示されなくなる

Google フォントをダウンロードして使おう

  • 上記リンクから「 Google Fonts」にアクセスしてください。

  • 好きなフォントを見つけたら緑の枠にある「ピンク色の+ボタン」をクリックします。

  • クリックすると下から「Family Selected」と言う文字が出てくるのでこちらもクリックします。

  • 最後に右上のダウンロードボタンをクリックするとダウンロードが開始するので後は、PCにインストールすれば完了となります。

下記の記事にもフォントのダウンロードの仕方を説明してあるので良かったら参考にしてみてください。

dasaweb.hatenablog.com

はてなブログでGoogle Web フォント使ってみよう。

下の英語文字「Google Web Fonts」を見ていただきたい。

全てGoogle Web フォントを利用して表示させています。

Google Web Fonts

Google Web フォントの「Montserrat Subrayada」を利用

Google Web Fonts

Google Web フォントの「Baloo Bhaina」を利用

Google Web Fonts

Google Web フォントの「Fascinate Inline」を利用

これらのフォントは、はてなブログで使うことが出来るので、やり方を簡単に紹介しようと思う。

まずGoogle Fonts 」にアクセスしてください。

次に使ってみたいフォントを選び「@IMPORT」をクリックします。

すると下のように2つのソースコード<style>〜から始まる3行のコードと「font-family:〜」と言うソースコードあると思います。

  1. <style>
  2. @import url(https://fonts.googleapis.com/css?family=Baloo+Bhaina’);
  3. </style>

<style>から始まる上のソースコード3行を「 デザインカスタマイズ>記事記事下 」にコピペします。

 さらに下のコードを<style>〜</style>の間に記述します。

ちなみに1行目の「 p.Balooの Balooの部分は“任意の名前”」で大丈夫です。

  1. p.Baloo {
  2.   font-family: ‘Baloo Bhaina’, cursive;
  3. }

実際に「はてなブログの記事下に記述するCSS」は下記のようになります。

  1. <style>
  2. @import url(https://fonts.googleapis.com/css?family=Baloo+Bhaina’);
  3. p.Baloo {
  4.   font-family: ‘Baloo Bhaina’, cursive;
  5. }
  6. </style>

最後に、はてなブログのHTML編集モード」で<p class=”任意の名前”>をつけることではてなブログの記事の中にGoogle Web フォントを表示させることが出来ます。

  1. <p class=“Baloo”>Google Web Fonts</p>

Google Web Fonts

今回はGoogle Web フォントの「Baloo Bhaina」を利用しましたが、お好みのフォントを利用してみてください。

ただし日本語は未対応なので注意が必要です。

まとめ

今回は「 Google Web フォント」のダウンロードから、はてなブログでの使い方を書きました

英語フォントを集めている方はお気に入りのフォント見つけてダウンロードしてみたらどうだろうか?あのGoogleが提供しているフォントでなので安心して使えるし、無料で使えるので使わない手はないですよね。

またサイトに「Web フォント」を利用することで他のサイトとの差別化が図れると思います。

dasaweb.hatenablog.com