CSS Web制作

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

※ 当サイトではアフィリエイト広告を利用しています

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

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

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

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

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

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 30日間でWeb制作を学べる
  • 完全無料
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 受付は1日25名までの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

\ 完全無料 /

ZeroPlus Gate公式サイト

先着1日25名まで!

フリーフォントとは?

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

利用の際には利用規約をちゃんと確認しましょう


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

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

 

ファイル構成

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

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

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

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

 

@font-faceの書き方

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

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

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

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

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

拡張子フォーマット名
.woffwoff
.woff2woff2
.ttftruetype
.otfopentype
.svgsvg

今回使うフォントの拡張子は『.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-weightnormalbold、または100〜900の数値で指定します。

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

数値font-weight名
100Thin (Hairline)
200Extra Light (Ultra Light)
300Light
400Normal (Regular)
500Medium
600Semi Bold (Demi Bold)
700Bold
800Extra Bold (Ultra Bold)
900Black (Heavy)

あとは通常・太字・斜体を使い分ければ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フォントを使う方法を解説してきました。

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

以上になります。

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-CSS, Web制作