CSS Web制作

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

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

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

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

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

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

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

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
1,100部以上販売し、レビューは630件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

1,100部突破🎉

商品ページはこちら!

2024年4月15日値上げ!

フリーフォントとは?

フリーフォントはインターネット上で無料で配布されているフォントで、ひらながのみやカタカナ・漢字・英数字も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制作