手軽に実装できるGoogle Fontsの実装方法について紹介!!

はじめに

前回はおすすめ無償&有償のWebフォントサービスについて紹介しました。

今回は実際にWebフォントを実装していく方法を紹介します。
まず今回実装するWebフォントは、Googleが提供しているWebフォントサービスの「Google Fonts」を使用します。

実装方法

まずはGoogle Fontsサービスにアクセスします。

Google Fonts
https://fonts.google.com/

表示していただきますと、下記画面が表示されます。※2017年7月現在

 

フォントの名前で検索する方法

使用したいフォントが決まっているなら、右上のSearchにフォント名を入力して探すという方法があります。この方法は、GoogleFontを使い慣れている方で、何回も同じフォントを使用している方がする方法ですね。

 

この方法だと使い慣れていない方向けではありません。
使い慣れていない方だと膨大にあるフォントをタイプ別に絞り込んで、その中で使用したいフォントを探していきたいと思うでしょう。
その場合は、次の方法で目的のフォントを探します。

絞り込み条件を付けて、フォントのタイプから探す方法

絞り込み条件と付けて、フォントを探す場合、右サイドに絞り込み用の項目が用意されていますので、そこでセリフ系・サンセリフ系などのフィルターをかけて、目的にあったフォントを絞り込んでいきます。
絞り込みますと、フォントの一覧のメイン画面が自動的に更新されますので、そこでフォントを探していただけます。

 

フォントを選んだら選択して実装

適用したいフォントが見つかりましたら、そのフォント名の右側に+アイコンがありますので、クリックします。

 

すると画面下側に「1Family Selected」と記載されてバーが表示されますので、そちらをクリックすると下記画面が表示されます。

 

<link href=”https://fonts.googleapis.com/css?family=xxxxxxxxxx” rel=”stylesheet”>を適用したいサイトのhead内に設置します。
また、フォントを適用したい箇所に「Specify in CSS」の項目で記載してる箇所を参考に指定します。

実装方法は2つの作業をするだけで簡単にWebフォントを実装できました。

最後に

Webフォントの実装について、如何だったでしょうか。

実に簡単にWebフォント実装ができると、思われた方も多いと思います。他のサービス同じような要領の実装ですので、和文フォントなども試されてみても面白いと思います。

他のWebサービスについて、知りたい方は下記の記事も参考にしてください。

https://plasol.hmup.jp/blog/18