WEBフォントはCSS3から利用できるようになった機能で、ユーザーのフォント環境に左右されないという、非常にありがたいメリットがあります。

ですが、GoogleFontsをはじめとするWEBフォントサービスは、対応する和文フォントが少なかったり、サービスが有償であったりと問題もあるので、自前でフォントを用意して使用する方法を解説します。

WEBフォントを使ってみよう

今回は自前でフォントをアップロードして使用するので、事前にフォントを用意しておく必要があります。

フォントをダウンロードしてサーバーにアップ

フリーフォントを配布しているサイトなどで、好みのフォントをダウンロードします。
今回は、鑓水製作所さんのライセンスフリーフォント「東青梅ゴシック」を使用させていただきます。

東青梅ゴシック

ダウンロードしたフォントをサーバーにアップロードし、「font」ディレクトリの中に保存します。

CSSでフォントを読み込む

CSSにフォントを読み込むためには、@font-faceを使用します。
コードの書き方は下記の通りです。

@font-faceでフォントを読み込む

@font-faceの font-family: でフォント名を定義して、src: url(‘…’) format(‘…’) でフォントをが保存されているURLとフォント形式を指定します。
フォントが保存されている場所は、CSSファイルからの相対パスとなります。

実際にコードを書いてみる

WEBフォントを適用すると、雰囲気がガラリと変わりますね。
サイトのデザインに合わせて、見出しを変更するだけでも雰囲気が変わるので、初心者の方も是非チャレンジしてみてください。

WEBフォントは簡単に設定できます

一見、難しそうなWEBフォントですが、CSSだけでカンタンに導入できてしまいます。
ただWEBフォントは、読み込みが遅くなるという欠点と、表示されないブラウザもあるので注意が必要です。

とは言え、便利なWEBフォントなのでぜひ使っていきたいですね。