注目キーワード

WebフォントをCSSの@font-faceで表示する方法

WebフォントをCSSの@font-faceで表示する方法
  1. HOME
  2. CSS
  3. WebフォントをCSSの@font-faceで表示する方法

Webサイトに表示できるフォントはCSS2.1までは閲覧環境にインストールされているローカルフォントだけでしたが、CSS3からはサーバーに置いたフォントを読み込んで使用することができます。

このようなフォントは「Webフォント」と呼ばれていて、Webフォントを表示する方法としてCSSでは@font-faceで表示することができます。

ローカルに作成したHTMLファイルにWebフォントをCSSの@font-faceで表示するまでの流れを記事にしました。基本的なやり方にはなりますが、サイトにWebフォントを実装する前にテスト表示で理解を深めたい方などの参考になればと思います。

 

目次

WebフォントをCSSで表示する準備

 

WebフォントをCSSで表示するための準備として、ローカルでの確認用フォルダを作成した中にfontsフォルダとHTMLファイル、style.cssを作成して入れておきます。

 

 

fontsフォルダにはCSSの@font-faceで表示するWebフォントのファイルを格納することになります。

 

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="font-change">
        <p>親譲りの無鉄砲で子供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間程腰を抜かした事がある。なぜそんな無闇（むやみ）をしたと聞く人があるかもしれぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫や－い。と囃（はや）し立てたからである。小使いに負ぶさって帰ってきた時、おやじが大きな眼をして二階位から飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。</p>
    </div>
</body>
</html>

 

HTMLファイルは上の記述のようにhead要素でstyle.cssを読み込んでおき、body要素内のクラス付けしたdivのボックスの中に文章を書いておきます。この文章の文字をstyle.css側に@font-faceを指定してWebフォントの書体を適用します。

 

Advertisement

 

Webフォントをダウンロード

 

準備しておいたfontsフォルダの中に入れるWebフォントのファイルをダウンロードして準備を進めます。

 

 

サンプルとしてダウンロードするWebフォントは、フリーフォントの「やさしさゴシック」というWebフォントを使用してみようと思います。

 

フリーフォントやさしさゴシック

 

上のリンクからやさしさゴシックのWebフォントがダウンロードできるページを表示して、少し下にスクロールすると「フォントをダウンロードする」のボタンがあるのでクリックします。

フォントのダウンロードは「パスワードを入力してダウンロード」のボタンの上に書いてあるパスワードを入力してからダウンロードします。

 

 

ダウンロードしたファイル名は「07Yasashisa.zip」です。zipファイルを解凍すると「07Yasashisa」フォルダになり、フォルダ内に「07やさしさゴシック.ttf」ファイルが入っています。このファイルをリネームしてWebフォントをCSSで表示する準備のときにローカルで作成したfontsフォルダに格納します。

今回はWebフォントのファイルを「yasashisa.ttf」にリネームしてfontsフォルダに格納しています。

 

CSSの@font-faceでWebフォントを表示

 

WebフォントをCSSで表示する準備ができたのでHTMLファイルに記述した文字の書体を、ダウンロードしたWebフォント「やさしさゴシック」の書体で表示できるようにCSSの@font-faceを記述していきます。

@font-faceは@規則というもので、アットマークと識別子(今回はfont-face)という文字列を記述することにより、外部フォントに関する指定ができるCSSです。

style.cssに@font-faceを記述します。

 

@font-face{
    font-family: font-change;
    src: url('../fonts/yasashisa.ttf') format('truetype');
}

 

CSSで@font-faceの書き方は@font-faceをCSSのセレクタのように記述した中に、使用するWebフォントに関する情報を記述していきます。

まずは@font-face内にfont-familyプロパティを記述して、値にWebフォント名を指定します。

次にsrcを記述してurl関数でWebフォントのファイルを指定します。WebフォントをCSSで表示する準備でfontsフォルダにWebフォントのファイル「yasashisa.ttf」を格納済みですのでファイルパスをつなぐことで、Webページを読み込むブラウザがフォントリソースを見つけて読み込んでくれます。

srcにはフォントデータのフォーマットも定義します。

フォーマットの定義は、Webフォントのファイル指定に続けて半角スペースを開けてからformat()を記述。カッコ内にtruetypeを定義します。

truetypeはフォントデータの形式の一つです。
フォントデータの形式については、使用するWebフォントをダウンロードするサイトなどで、そのWebフォントがどんなフォント形式なのかを確認して指定をするようにします。

このようにCSSで@font-face内に記述したフォント情報に関するfont-familyやsrcは記述子(ディスクリプタ)と言います。これから使用するWebフォントデータをセッティングしてまとめているといった感じで覚えるといいかもです。

 

Advertisement

 

@font-face内に記述子の指定ができたら、Webフォントの書体で文字を表示させます。

 

body{
    background-color: #333;
}

@font-face{
    font-family: yasashisa;
    src: url('../fonts/yasashisa.ttf') format('truetype');
}

.font-change{
    font-family: 'yasashisa';
    color: aliceblue;
    line-height: 1.5rem;
    width: 100%;
    margin: 50px auto;
    font-size: 2.0rem;
}

 

文章を書いて準備しておいたHTMLファイル内のdivにはfont-changeというクラスを付けてあります。CSSでfont-changeをセレクタにしてfont-family: ‘yasashisa’;を指定します。

記述例では、ページ全体の背景を黒にして文字色はaliceblueに、フォントサイズを大きめに指定しています。

 

 

WebフォントをCSSの@font-faceで表示したHTMLファイルの表示結果は上の画像のようにWebフォントの書体に変更した文章が表示します。

 

svgフォントをCSSの@font-faceで表示する場合

 

svgフォントをCSSの@font-faceで表示する場合は、記述子のsrcでsvgフォントのファイル指定に、フォントのidを指定します。

 

@font-face {
    font-family: 'icomoon';
    src: url('fonts/icomoon.svg?wnkt36#icomoon') format('svg');
}

 

上記のCSS記述はicomoonのsvgアイコンで指定されている@font-faceの指定です。

ファイル指定のすぐあとにフォントidの指定があるのが分かるかと思いますが、svgフォントをCSSの@font-faceで表示する場合もsvgアイコンと同じく、ファイル指定のときにフォントidを指定する書き方をします。

 

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Generated by IcoMoon</metadata>
<defs>
<font id="icomoon" horiz-adv-x="1024">

 

svgフォントのidはsvgファイルの<font>のID属性値として指定されているものです。

 

Webフォントをサーバーにアップロード

 

WebフォントをCSSの@font-faceで表示するのをローカルで表示テストして問題なければ、サーバーにアップロードして実装します。

ローカルでの確認用フォルダを作成した中にWebフォントのファイルが入ったfontsフォルダを作成していますので、fontsフォルダをサーバーにアップロードします。

そしてローカルで使用していたstyle.cssに記述していたCSSの@font-faceの指定部分を、サーバー側のstyle.cssにコピペします。このときsrcでのファイル指定もサーバー側のファイル階層に合わせた指定に記述し直します。

最後に@font-faceで書いたfont-familyのWebフォント名を使用して、文字の書体を適用したい要素にフォント指定をすることで、WebフォントをCSSの@font-faceで表示することができます。

CSSカテゴリの最新記事