CSSでダウンロードしたWebフォントを使う方法【@font-faceの書き方】

ダウンロードしたWebフォントってどうやって使うの？

インターネット上にはフリーで使える特徴的なフォントがたくさん配布されていますが、それを使う方法を今回は解説していきます。

ちなみに上がデフォルトで、下がWebフォントを適用させた状態です。

上はデフォルト、下はWebフォント

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

• 完全無料
• 30日間でWeb制作を学べる
• 現役エンジニアへの質問無制限
• オンラインの動画学習なので時間場所を問わず勉強可能
• 最大4回の学習サポート面談
• 毎日人数制限ありの先着制

無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
（有料になっていたらすいません🙇‍♂️）

＼ 完全無料 ／

ZeroPlus Gate公式サイト

毎日先着制！

フリーフォントとは？

フリーフォントはインターネット上で無料で配布されているフォントで、ひらながのみやカタカナ・漢字・英数字もOKなフォントもあります。

CSSでダウンロードしたWebフォントを使う方法

それでは解説していきますが、フォントはダウンロードしてファイルは手元にあるという前提で進めていきます。

ファイル構成

ファイル構成に決まりはありませんが、今回はダウンロードしたファイルは『fonts』というフォルダに入れます。

fontsフォルダにフォントファイルを入れる

フォントファイル名は変えても大丈夫ですが、拡張子は変えないようにしましょう（今回使用しているのは『851マカポップVer 0.01』というフォントです）

@font-faceの書き方

CSSの書き方はこちらです。

@font-face {
  font-family: "任意のフォント名";
  src: url("フォントファイルのパス") format("フォーマット名");
}

フォント名は分かりやすい名前でOKです。

フォントファイルへのパスですが、今回の場合はindex.htmlの同じ階層のfontsフォルダにあるのでurl("../fonts/DLfont.ttf")となります。

そしてフォーマット名はこちらになります。

今回使うフォントの拡張子は『.ttf』なので、書き方はこちらになります。

@font-face {
  font-family: "myfont";
  src: url("../fonts/DLfont.ttf") format("truetype");
}

formatは複数指定することも可能です。

@font-face {
  font-family: "myfont";
  src: url("../fonts/DLfont.ttf") format("truetype");
  src: url("../fonts/DLfont.woff") format("woff");
}

実はformatは書かなくても特に問題はありませんが、もし上手く読み込めない場合は拡張子を変えるという方法があります。

以下のサイトで拡張子を変えられるので、.ttfと.woffの2種類あれば大丈夫だと思います。

Convertio

適用させたいフォントに指定

@font-faceでフォントを読み込むコードを書けたら、あとはフォントを適用させたい箇所に指定するだけです。

h2 {
  font-family: "myfont", sans-serif;
}

"myfont"は@font-faceで書いた任意のフォント名です。

複数の太さ・styleのフォントを読み込む方法

Webフォントは太さやstyleごとにファイルが異なるので、複数使いたい場合はこのように書きます。

/* normal */
@font-face {
  font-family: "myfont";
  src: url("../fonts/DLfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
/* bold */
@font-face {
  font-family: "myfont";
  src: url("../fonts/DLfont-bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}
/* italic */
@font-face {
  font-family: "myfont";
  src: url("../fonts/DLfont-italic.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
}

font-familyは全部同じにします。

font-weightはnormalかbold、または100〜900の数値で指定します。

参考サイト：font-weight - CSS: Cascading Style Sheets | MDN

あとは通常・太字・斜体を使い分ければOKです。

.title {
  font-family: "myfont", sans-serif;
}
.title-bold {
  font-family: "myfont", sans-serif;
  font-weight: bold;
}
.title-italic {
  font-family: "myfont", sans-serif;
  font-style: italic;
}

ただfont-weight: bold;にするだけで太字になるフォントもあるので、まずは通常の書き方で試してみるといいかと思います。

まとめ

今回はダウンロードしたWebフォントを使う方法を解説してきました。

実務ではあまり使う機会はないかも知れませんが、特徴的でユニークなフォントが多いので自分のサイトなどで使ってみるのも良いかも知れません。

以上になります。

この記事が役に立ったと思ったら、シェアボタンからX（旧Twitter）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！