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

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

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

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

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

記事の前半ではフリーフォントとWebフォントについて解説しているので、ダウンロードしたフリーフォント（Webフォント）を使う方法を知りたい方は、目次から『CSSでダウンロードしたフリーフォント（Webフォント）を使う方法』をクリックして先に進んで下さい。

じゅんぺいブログは、Web制作（コーディング・WordPress制作）の技術記事を中心に、約500記事公開しています。ぜひ他の記事も参考にしてみてください！

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

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

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適です。

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

＼ 完全無料 ／

ZeroPlus Gate公式サイト

毎日先着制！

フリーフォントとは？

フリーフォントとは、無料で使用できるフォントのことです。 チラシやWebサイト、動画など、様々な場面で手軽に利用できるため、デザイナーやクリエイターにとって欠かせない存在となっています。

個人利用はもちろん、商用利用も可能なものが多く、コストを抑えながら表現の幅を広げたい時に役立ちます。 例えば、お店のチラシに個性的なフリーフォントを使ったり、Webサイトの見出しにインパクトのあるフリーフォントを使ったりすることで、より魅力的なデザインに仕上げることが可能になります。

しかし、フリーだからといって、完全に自由に使えるわけではありません。 フォントごとに利用規約が定められており、商用利用が制限されていたり、加工が禁止されていたりする場合があります。

フリーフォントの利用範囲

主なライセンスの種類

フリーフォントのライセンスは、大きく分けて以下の3つの種類があります。

フリーフォントを利用する際の注意点

フリーフォントの入手方法

フリーフォントは、以下のサイトなどで入手できます。

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

SIL Open Font License (OFL)

近年、フリーフォントのライセンスとして、SIL Open Font License（OFL）が注目されています。OFLは、フォントの自由な利用、加工、再配布を許可するライセンスで、商用利用も可能です。Google Fontsで提供されているフォントの多くは、OFLでライセンスされています。

Webフォントとは？

Webフォントとは、Webサイト上で表示するためのフォントです。

クラウド上にあるフォントファイルをインターネット経由で読み込むことで、ユーザーの端末にフォントがインストールされていなくてもデザイナーが指定したフォントでテキストを表示することができます。

従来、Webサイトで表示できるフォントは、ユーザーのコンピュータにインストールされているフォントに限られていました。そのため、デザイナーが意図したフォントで表示されないことが多く、Webサイトのデザインに制約がありました。

しかし、Webフォントの登場により、この問題は解決されました。

Webフォントを使用すれば、ユーザーの環境に関係なく、美しいフォントでWebサイトを表示することができます。 例えば、洗練されたデザインのフォントを使ってブランドイメージを高めたり、読みやすいフォントを使ってアクセシビリティを向上させたりすることが可能になります。

Webフォントの仕組み

WebサイトにWebフォントを表示するには、CSSの@font-faceルールを使ってフォントファイルを指定します。

ブラウザは、このルールに従ってフォントファイルをWebフォントサービスからダウンロードし、Webページに表示します。

CSSの書き方について、後ほど解説します。

Webフォントのメリット

Webフォントのデメリット

Webフォントの種類

Webフォントには、主に以下のファイル形式があります。

Webフォントサービス

Google Fontsの使い方は、以下の記事を参照ください。

Webフォントの選び方

フリーフォントとWebフォントの違いとは？

フリーフォントとWebフォントはどちらもデジタルフォントですが、その用途、提供方法、ライセンス、技術的な側面に違いがあります。

用途と使用例

提供方法

ライセンス

技術的な側面

パフォーマンス

フリーフォントとWebフォントの組み合わせ

フリーフォントをWebフォントとして使用することも可能です。 自分のコンピュータにインストールされているフリーフォントをWebフォントに変換して、Webサイトに埋め込むことができます。

ただし、フォントのライセンスによってはWebフォントとしての利用が禁止されている場合があるので、注意が必要です。

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）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！