Google Fontsを使ってWebページにフォントで差をつけてみる

ウェブサイトやLPなどを作成していると

「似た様なフォントが続いてモタッとしてる…」

「もう少しページにアクセントを付けたいな」

なんて時に便利なのが『Google Fonts』です。

そもそも何故同じ様なフォントのサイトが多いのか

これは、あなたが使用しているブラウザによって異なりますが、

ウェブサイト側がフォントを指定してない限り、各ブラウザの指定フォントになっているからです。

各ブラウザのフォント

※以下参考

Google Chrome
Mac:ヒラギノ角ゴ ProN
Windows:メイリオ
Firefox
Mac:ヒラギノ角ゴ ProN
Windows:メイリオ
Internet Explorer
Windows:MS Pゴシック
Safari
Mac:ヒラギノ明朝 ProN

という様に、ブラウザごとに”フォント無指定”の場合は上記のフォントがあてがわれるということですね!

しかし、今回はむしろフォントを指定していこう!

という記事になります

基本的なフォント指定の方法

フォントの指定はCSSで指定できます。

サイト全体はゴシックで、所々明朝体が使いたい。

なんて場合もCSSで可能です。その場合には、

#wrapp{font-family:サイト全体に指定したいフォント;}

.tittle{font-family:部分的に指定したいフォント;}

のようにフォントの指定が可能です。

通常は、ゴシックや明朝で少しアクセントを加えたりすることもありますが、今回紹介するGoogle Fontsはフォントの種類がとても充実しています!

特に英字表記の時などには大変お世話になっています!

Google Fontsの使い方

さっそく本題に入りたいと思います。

まず下記からGoogle Fontsへアクセス

Google Fonts

Making the web more beautiful, fast, and open through great …

すると、すでにずらーっとフォントが並んでいます

ここから好きなフォントを選んでください。

左の赤下線の部分ではフォントの検索が可能

真ん中の囲んである部分では実際に入力したい文字の入力が可能です。

試しにサイト名の『FreeLaDay』を入力してみると

このように全てのサンプルテキストが変更され、実際に使ったときのイメージがしやすくなっています。親切!

今回は「Calistoga」を使ってみたいと思います。

使いたいフォントを見つけたら、右上の「+」をクリック

下にこのような黒いバーが現れるので、バーをクリック

すると、スタイルシートの読み込みと、指定するフォントの記述が出てきます。

まず、上にある

<link href="https://fonts.googleapis.com/css?family=Calistoga&display=swap" rel="stylesheet">

を<head></head>内に貼り付けます

その後指定したい箇所の要素に

font-family: 'Calistoga', cursive;

を追加

これで完了です!とっても簡単!

下記がフォント指定なしとフォント指定後です。

無指定フォント指定
FreeLaDay

FreeLaDay

だいぶ印象が変わりますね!

ぜひ、Google Fontsでサイトやページにアクセントを加えて、さらに目を引くデザインにしてみてください!

FOLLOW ME
>フリーランス をもっと気軽に!

フリーランス をもっと気軽に!

現役フリーランサーによる役立つ情報サイト
主に『Web』に関する知識を掲載。

デザインやライティング術、コラムなどの
フリーランスが充実するような記事も掲載中。

CTR IMG