文字のフォントはデフォルトでも良かった時代から変わり最近では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はおすすめです。
コメント