【Google Font】グーグルフォントをWEBサイトに使う方法

文字のフォントはデフォルトでも良かった時代から変わり最近ではWEBフォントを使ったサイトも増えてきています。

フォントが変わることで見た目やデザインも大きく変わります。

フォントを画像で貼り付けるよりもWEBフォントで表現するほうが修正するときも楽になりデバイスごとにテキストの折り返しも自動で行ってくれるので汎用性が高まります。

未経験でも安心!人気のプログラミングスクール

マンツーマン指導だから未経験からプログラミングが学べて高いコーディングスキルが身につく人気のテックキャンプ!

ブラウザごとのフォントについて

WEBページで表示されるフォントについてはパソコンやスマホごとに変わっていきます。

ですがWEBフォントを利用することでデバイスごとによるフォントの違いを解決でき同じフォントで表示させることができます。

Google Fonts

GoogleではWebフォントのサービスを行っている「Google Fonts」というものがあります。

無料で使うことができるので多くのサイトでGoogle Fontsを使用しています。

WEBフォントの使い過ぎに注意しよう

Google Fontsは、サーバーからの読み込みテキストを使用しているので使う箇所が多くなればなるほどページの読み込みにも時間がかかってしまいます。

使用する場合は、使う場所を限定したり特定の場所でのみ使うなどの調整が必要だと思います。

ページが重くなってしまったら離脱率も高くなるので使いすぎも注意が必要です。

Google Fontsの使い方

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

開いたら使いたいWEBフォントを選択したり検索します。

右にある「Select this style」を押すとlinkで設定する方法と@importで設定する記述方法が確認できます。

たとえば「Roboto」の「Thin 100」を選択した場合の記述例は下記になります。

link

linkタグを使って読み込む場合になります。

htmlのheaderタグの中に以下の記述します。

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">

次に使用したいところのスタイルに下記を記述します。

font-family: 'Roboto', sans-serif;

@import

次は@importで設定する場合です。

cssファイルやstyleタグに下記を追加します。

<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
</style>

次に使用したいところのスタイルに下記を記述します。

font-family: 'Roboto', sans-serif;

最後に

Google Fontsを使うことでわざわざフォントをダウンロードしてサーバーにおいて読み込むということをしなくても簡単に設定することができるので便利です。

今後WEBフォントを使用するサイトが増えてくると思うのでGoogle Fontsはおすすめです。

コメント

タイトルとURLをコピーしました