​Googleフォントを使ってサイトの印象を変えてみよう

2024/9/9追記
クローバ PAGEの標準機能でWebフォントが利用できるようになりました！　こちらに書かれている方法は引き続きご使用になれます。

最近はWebフォントを使ったサイトも少しずつ増えてきています。Webフォントというのはパソコンやスマホにあらかじめ用意されているフォント以外に、サイト独自のフォントでウェブサイトを表示するしくみのことです。WindowsとMac OS、iPhoneとAndroidではそれぞれ標準で用意されているフォントが違いますから、同じサイトでも見た目の印象がずいぶん異なることがあります。Webフォントを使うとどんなブラウザで表示しても、見た目を統一することができます。難点としては、日本語はひらがな、カタカナ、漢字と文字の数が非常に多いため、フォントのデータ量が大きくなってしまうのです。なのでこれまでWebフォントは主に文字の種類の少ない英語圏で使われてきました。海外のサイトを見て、フォントがきれいだなと思ったことはないでしょうか。こうした理由で日本ではあまり普及していなかったのですが、2018年にGoogleが提供しているGoogle Fontsで日本語が正式にサポートされたのをきっかけに、利用するサイトも見られるようになりました。

クローバ PAGE では基本的に日本語で使われることが多いためWebフォントの対応は限定的でしたが、スタイルシートでGoogle Fontsを使うことができます。

スタイルシートによるカスタマイズはプレミアムプラン以上で利用できます。

さっそくやってみましょう。

好みのフォントを探す

Google日本語フォントのサイトにアクセスします。お好みのフォントが見つかったら、クリックして「HTML」と「CSS」の内容を確認します。

スタイルシートを作成する

以下のようにスタイルシートを作成します。

記載されているHTML:

<link href="https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c" rel="stylesheet">

記載されているCSS：

.wf-roundedmplus1c { font-family: "M PLUS Rounded 1c"; }

の場合は以下のようになります

@import url("https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c");
.heading__h, .text__text {
  font-family: 'M PLUS Rounded 1c';
}

カスタマイズ設定でこのスタイルシートを設定すると、見出し及びテキストパーツのフォントが設定したフォントに変わります。

フォントを変えるとだいぶ印象が変わったのではないでしょうか。

英語フォントでもやり方は同じです。Google Fontsには日本語以外にも様々なフォントが提供されています。欧文フォントならデータサイズを気にせず利用できます。

こちらから好きなフォントをクリックして、「Get font」>「Get embed code」の順にクリックします。