Fontsで日本語フォントもCSSのWebフォント機能の簡単な使い方を解説。Fonts」の使い方と、日本語Webフォントが700種類以上あるモリサワ「TypeSquare」の使い方を紹介し、自サイトにアップロードしたフォントファイルをWebフォントとして使うCSSの書き方も解説。欧文(英数字)、日本語、アイコン(絵文字)など、望みのWebフォントを探してみて下さい。文宏ホームページ作成ガイドWebフォントとは?Webフォントとは、ブラウザがフォントファイルそのものをウェブ上からダウンロードして文字の表示に使ってくれる仕組みのことです。CSSの@font-faceという記述を使ってダウンロードするフォントを指定します。閲覧環境に望みのフォントがインストールされていなくても、ウェブ上にフォントファイルを用意しておけば望みのフォントで文字を表示できるため、指定のフォントが使えずに意図しない表示になってしまうことを防げるメリットがあります。Webフォント機能は、文字を表示するためのフォントファイルもウェブ上からダウンロードして表示に使える仕組み■日本語Webフォントの提供サービスもあるWebフォントを提供しているサービスも多数あり、自サイト上にフォントファイルを置かなくても様々なWebフォントが手軽に使えます。CSSのWebフォント機能をブラウザがサポートし始めた当初はファイルサイズが小さくて済む欧文フォントの提供が主でしたが、今ではデータサイズを削減して配信する仕組みを活用した日本語Webフォントの提供サービスもあります。Fonts」と「TypeSquare」という2つのWebフォント提供サービスの使い方をご紹介いたします。日本語Webフォントを含む豊富な選択肢から望みのフォントを選んで使ってみて下さい。自サイト上にフォントファイルをアップロードして使うCSSソースの書き方も解説しています。用途に応じてご参照下さい。(p.4)Webフォントのメリットと活用例WebフォントはCSS3で追加された機能で、読み込むフォントファイルとフォント名とを対応付ける「@font-face」という記述方法を使います。この記述は、代表的なブラウザなら既にどのブラウザでも使えます。古いブラウザでも、例えばIE9以降でなら問題なく使えます(IE8でもEOT形式のフォントを用意しておけば使えます)。したがって、もはや非対応環境の存在は気にせずに使って問題ないでしょう。以下に、このWebフォント機能を使うメリットや活用例をご紹介しておきます。■CSSでフォント名を指定可能だが、表示されるとは限らないCSSのfont-familyプロパティを使えば、文字の表示に使ってほしいフォント名を指定できます。フォント名を指定しても閲覧環境にそのフォントがインストールされていなければ表示できません。CSSで指定されたフォントが存在しない環境では、下図の右下のように標準のフォントで表示されてしまいます。従来は、表示環境に指定フォントがインストールされていなければ、文字をそのフォントでは表示できなかった絶対に望みのフォントで表示させたい場合、従来なら画像化するくらいしか方法がありませんでした。文字の画像化には様々なデメリットがあって望ましくありません。そこで便利なのがCSSのWebフォント機能です。フォントファイル自体がウェブ上からダウンロードされるため、必ず望みのフォントで表示できるからです。■アイコン画像をフォントとして表示する仕組みにも使われるWebフォント機能は、アイコンが収録されたフォントを使うことで様々な絵文字を表示させる方法にも活用されています。アイコンデータを画像ファイルではなくフォントファイルとして用意しておけば、拡大縮小がきれいにできる、CSSで配色を変更できる、複数のアイコンを1ファイルで管理できる......といった多数のメリットがあります。アイコン画像とは違い、Webフォント機能を使ったアイコンフォントなら、表示サイズや配色をCSSで自由に指定できるアイコンWebフォントの活用方法については、下記の2つの記事でも解説していますのでご参照下さい。:無料版でも1,300種類以上のアイコンが使えるサービスで、HTMLにたった1行を追加するだけで使用可能。:限界までデータサイズを抑えたアイコンWebフォントが作れるサービスで、Webフォントファイルは自サイトに設置可能。日本語フォントを含む多数のWebフォントを提供しているサービス詳しくは次のページからご紹介いたしますが、日本語フォントを含む多数のWebフォントを提供しているサービスもあります。それらを活用すれば、自サイト上にフォントファイルを置いておくことなく、簡単にWebフォントが利用できます。本記事では、以下の2つのサービスの使い方を解説しています。Fonts」というサービスを運営しています。本稿執筆時点では915種類のフォントが公開されていました。HTMLソースまたはCSSソース内に指定の1行を加えるだけという簡単な方法で、豊富なフォント群から望みのものを選んで表示に使えます。日本語Webフォントも少しだけあります。Fonts」すべて無料で利用でき、会員登録やID作成なども不要なので楽です。Fontsの使い方」で解説しています。■日本語Webフォントが700種類以上ある、モリサワ「TypeSquare」フォント販売大手のモリサワでは、Webフォント提供サービス「TypeSquare」で多数の日本語Webフォントを提供しています。本稿執筆時点では772種類の日本語Webフォントが選択肢に含まれており、下図のように装飾された日本語文字のフォントも多数ありました。日本語は文字数が多いため、フォントデータ全体をダウンロードすると時間がかかってしまいます。TypeSquareでは、ウェブページ内に実際に存在する文字に限定したサブセットのフォントを配信することで、ダウンロード時間を最小限にする仕様になっています。TypeSquareの使い方は、本記事の3ページ目「700超の日本語WebフォントがあるTypeSquareの使い方」で解説しています。自サイト上のフォントファイルをWebフォントとして使う方法もあるフォントファイルを自サイト上にアップロードしておき、それをWebフォントとして使うようにCSSを書くこともできます。自分で作成したフォントや、ライセンスフリーのフォントなどを使いたい場合には、この方法を使って簡単に望みのフォントで文字を表示できます。「フォントを自作する機会などない」と思われるかも知れませんが、アイコンWebフォントを活用する場合には「既存のアイコンのうち、自分が使う分だけを抜き出した最小限のWebフォントファイル」を作成して使うことがあります。その方が読み込むデータ量を少なくできるからです。その場合には、自サイト上にフォントファイルをアップロードして使うことになります。このように、自サイトにアップロードしたフォントファイルをWebフォントとして使う方法は、本記事の4ページ目「自サイト上のフォントファイルをWebフォントとして使うCSSの書き方」で解説いたします。About公式SNS日々の生活や仕事を楽しむための情報を毎日お届けします。