Webフォントって良く聞きますが、難しそうと思っていたり、日本語に対応する良いWebフォントがなかったりしていて、導入を後回しにしていた方も多いかと思います。今回は、そんなWebフォントの基本操作と設定方法について解説しました。思いのほか簡単に設定できますので、サイトの印象を変えたい場合等は、一度試してみてはいかがですか。

Webフォントとは

Webフォントとは、CSS3から新たに追加された仕様です。CSSを使ってブラウザ上で任意のフォントを表現できる機能になります。CSS3の普及に伴ってWebフォントの開発は加速し、今やWebデザインを行う上では欠かせないテクニックとなっています。WebフォントはサーバーにアップロードしたフォントデータをCSSで呼び出して利用するので、ユーザーの閲覧環境に依存せず、誰が見ても同じフォントで表示されるようになり、ブラウザが違う場合や、スマホで見た場合でも指定したフォントを表示することができるようになりました。このようにWebフォントは、制作したWebデザインを正確に出力するために欠かせない機能となっています。

尚、Webフォントは著作権が発生します。多くの場合、商用・個人関係なく利用できるWebフォントが多いのですが、利用の際にはチェックしておくことをお勧めします。

Webフォントのメリット・デメリット

メリット

・ユーザーの環境に依存せずWebデサインに合ったフォントを利用できる。
・デザイン性の高い文字も画像ではなく、テキストのためSEOに有利となる。

デメリット

・Webフォントのデータを読み込むための時間がかかる。
・日本語Webフォントは種類が少なく、データも重い。

使用手順

Webフォントの設定は簡単で、CSSコードとHTMLコードを記述するだけで実装出来ます。使用手順以下の通りになります。

  1. 利用したいWEBフォントファイルを用意する
  2. CSSでフォントファイルを指定する
  3. CSSでフォントを適応する

利用したいWEBフォントファイルを用意する

まずは、利用するWebフォントですが、GoogleでWEBフォント検索してもらってもいいですが、今回は最も有名なGoogle Fontsを例に紹介して行きます。

Google Fontsをクリックすると、下記の画面が表示されます。

webfont01

画面には4つのタブがあり、好みに合わせて4通りの表示形式を設定することができます。また、「Preview Text:」に文字を入力するとブラウザ上に任意の文字を表示させることができます。

webfont02

・Word（単語表示）
・Sentence（文表示）
・Paragraph（段落表示）
・Poster（ポスター表示）

今回は、「Design-plus」という文字をテキストで入力し、「Lobster」というスタイルを選択しました。
webfont03

CSSでフォントファイルを指定する

続いて、CSS側でフォントデータを指定します。

まず、指定用の、タグを取得するには「Quick-use」ボタンをクリックします。
webfont04

下記のような画面が表示されますので、「フォントの太さ」「文字セット（基本はLatinでOK）」を設定します。
webfont05

設定が出来たら、テーマにCSSを読み込みます。方法は、以下の3通りあります。
・Standard（HTMLで読み込み）
・@import（CSSで読み込み）
・JavaScript（JavaScriptで読み込み）

webfont06

基本的には、header.phpのheadタブの間にStandardタブにある以下のようなコードを挿入します。

<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

もしCSSで読み込みたい場合には、style.cssなどの先頭に@importタブにある以下のようなコードを挿入します。

@import url(https://fonts.googleapis.com/css?family=Lobster);

CSSでフォントを適応する

最後に、style.cssなどにスタイルを記入します。

まずは、ブラウザの開発ツールなどでフォントを変更したい部分のCSSセレクタを確認します。ブラウザの開発ツールについてはこちらの記事を確認ください。

サイト検証・カスタマイズに便利なChromeデベロッパーツールの基本的な使い方

webfont07

実際に導入すると、こちらのようなフォントが、
webfont08

この用に変更されました。
webfont09

まとめ

今回はWebフォントの設定方法について解説させていただきました。google fonts以外にも、TypeSquareやFONTPLUSなどのWebフォントもありますので、色々とお試し下さい。また、もし設定しても、Webフォントが表示されないということがありましたら、前回の記事、SNSボタンやWebフォントが表示されないときのよくある原因と対処法が参考になるかと思いますので合わせて活用いただければ幸いです。