2020/11/30

Google Webフォントを使ってみる

最近では、自社のブランディングのために独自のWebフォントを作成して利用している企業もあったり、個人のブログでも独自フォントを利用してデザイン性を高めるサイトも増えてきています。

フォントというとパソコンにインストールするもの、というのが一昔前の考え方でした。そのようなフォントは数MBあったりしWebでは利用が困難なようにも見えます。そこで、Webフォントというものが登場しました。軽量かつパソコンにインストール不要のフォントのしくみによって、Web上で簡易に利用ができるようになったのです。

Webフォントを作成することも可能ですが、この記事ではすでに公開されているGoogleのWebフォントを利用する方法を記載します。


目次[非表示]

Webフォントの利用に必要なもの

Webフォントを利用するには、大きくわけると以下3つの作業が必要となります。

  1. Webフォントの作成
  2. サーバへのWebフォントのインストール
  3. 利用先でのCSSによるWebフォントの指定

Google Fontsのようにすでに作成および公開されているフォントを利用するだけであれば、「１．Webフォントの作成」と「２．サーバへのWebフォントのインストール」は不要になります。以下では利用する観点のみに焦点を絞り、「3. 利用先でのCSSによるWebフォントの指定」で具体的に何をするのかを説明します。


利用先でのCSSによるWebフォントの指定

利用先（個人のブログやWebページ）では利用するフォントの指定と、利用箇所での指定を行います。

1. 利用するフォントの指定

スタイルシートタグ内で、@font-faceとして任意のフォント名を指定し、フォントファイルへのパス（URL）およびフォントの形式を指定します。 

<style>
@font-face {
  font-family: 'MyWebFont';
  src: url('MyWebFont.woff') format('woff');
}
</style>

2. 利用箇所の指定

Webフォントを利用したい箇所に対して、上記で指定したフォント名を利用するようにスタイルシートを適用します。 

<html>
<head>
<style>
body {
  font-family: 'MyWebFont';
}
</style>
</head>
<body>
この文にMyWebFontが適用されます。
</body>
</html>


Google Fontsの利用

Google FontsはGoogleが提供する無料のWebフォントです。ライセンスにも気を遣わずに利用できる点でも「取り急ぎWebフォントを導入してWebサイトをかっこよくしたい」ということであれば、Google Fontsをお薦めします。

さて、では実際にGoogle Fontsを利用してみましょう。

  1. Google Fontsにアクセスし、利用するフォントをクリックします。


  2. フォントスタイル一覧で、利用するフォントスタイルの右側にある「+ Select this style」をクリックします。


  3. 右側にWebサイトに貼り付けるコードが表示されます。


  4. <link href ...>のコードをコピーし、HTMLの<head>タグ内に貼り付けます。また、CSSルールはスタイルを適用したい箇所のCSS内に貼り付けます。
    ※Google Fontsを利用する場合、「利用するフォントの指定」の作業はGoogle側で実施してくれています。そのため、利用者は、Googleが定義したCSSを読み込むことになります。
    <html>
<head>
:
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
</head>
<body>
:
<span style="font-family: 'Noto Sans JP', sans-serif;">あいうえお</span>
:
</body>
</html>


おわりに

Webフォントの利用は本当に簡単にできましたね。フォントを変えるだけで印象もガラっと変わります。ぜひWebフォントを有効活用してみてください。