ZeroPlus Media > Web制作 > HTML/CSS > 【CSS】@font-faceでfont-familyを指定する方法

【CSS】@font-faceでfont-familyを指定する方法

2022/01/04

2023/04/14

有名なWebフォントとしてGoogleフォントやAdobeフォントがあります。
特に、Googleフォントは無料でさまざまなフォントを使えるためとても魅力です。

しかし、Googleフォント以外のWebフォント（例えば無料で使えるフリーのフォントなど）を使いたいという場合があります。そんなとき活躍する@font-faceというプロパティを使って、Webフォントを適用する方法を紹介していきます！

なお、Googleフォントの使い方に関しては、以下の記事でも解説しています！

【CSS】font-familyの書き方と効かないときに確認すること

この記事で身につく内容

@font-faceプロパティの使い方

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

@font-faceとは

font-faceは、独自のフォントを指定します。

基本書式

@font-face {
  font-family: "フォント名";
  src: url("/フォントのパス//●●●.woff2") format("woff2"),
  url("/フォントのパス/●●●.woff") format("woff");
}

利用可能な形式は下記になります。

woff：拡張子は、.woff
woff2：拡張子は、.woff2
truetype：拡張子は、.ttf
opentype：拡張子は、.otf
embedded-opentype：拡張子は、.eot
svg：拡張子は、.svg

形式の違いはfont-faceの利用方法に影響がないためここでは解説しません。
font-faceを利用する際に覚えておく必要があるものは下記3つになります。

Webフォントには複数の形式がある
@font-faceを使って複数の形式を指定できる
Googleフォント以外のフォントが使えるようになる

@font-faceの具体的な使い方

ここからは、具体的に@font-faceの使い方を解説していきます！

まず使いたいフォントを選択します。今回は以下のサイトに記載されているWebフォントを利用します。

手書きフォント「仕事メモ書き」：すもももじの手書きフォントダウンロード
フォントポにほんご：フォントポにほんごダウンロード

  <p class="font1">serif体の文章です！</p>
  <p class="font2">「仕事メモ書き」フォントを使った文章です！</p>
  <p class="font3">「フォントポにほんご」を使った文章です！</p>
  <p class="font4">sans-serif体の文章です！</p>

@font-face {
  font-family: 'sigoto';
  src: url('./font/ShigotoMemogaki-Regular-1-01.ttf') format('truetype');
}
@font-face {
  font-family: 'fontpo';
  src: url('./font/FontopoNIHONGO.otf') format('opentype');
}

p {
  font-size: 36px;
}

.font1 {
  font-family: serif;
}

.font2 {
  font-family: 'sigoto', sans-serif;
}
.font3 {
  font-family: 'fontpo',sans-serif;
}
.font4 {
  font-family: sans-serif;
}

出力結果