もくじ
サーバーにアップロードしたフォントファイルを読み込んで、CSSのfont-familyプロパティに適用する手順を解説します。
Webサイトのデザインにおいて、オリジナルのフォントを使用することで、見た目のインパクトや独自性を高めることができます。
1. フォントファイルの準備
まず、使用したいフォントファイルを用意します。
.ttfや.otfより.woffや.woff2の方がWebに最適化されており軽くなってます。
.ttf（TrueType Font）.otf（OpenType Font）.woff（Web Open Font Format）.woff2（より圧縮された Web Open Font Format）
2. フォントファイルをサーバーにアップロード
用意したフォントファイルをサーバーのフォルダにアップロードします。
今回は、/fontsフォルダにアップロードすると仮定します。
3. CSSでフォントを定義
アップロードしたフォントをCSSで定義します。
@font-faceルールを使ってフォントを指定します。
以下のコードはcustomfont.woff2、customfont.woff、customfont.ttfの複数のファイルを指定していますが、1つのファイル指定でも大丈夫です。
フォントファイルのブラウザ別対応状況はこちら
@font-face {font-family: 'CustomFont';src: url('/fonts/customfont.woff2') format('woff2'),url('/fonts/customfont.woff') format('woff'),url('/fonts/customfont.ttf') format('truetype');font-style: normal;font-weight: normal;}
font-familyプロパティを指定する
font-family:カスタムフォントに任意の名前を指定。
srcプロパティを指定する
上記のコードでは、Webに最適なwoff2、woff、truetypeの順で複数のフォントファイルを指定しています。
font-styleプロパティを指定する
フォントの斜体（italic）や通常のスタイル（normal）を指定します。
font-styleプロパティに設定できる値
- normal
- 通常のスタイルを指定します。
フォントに特別なスタイルは適用されません。
- italic
- フォントの斜体バージョンを指定します。
デザイン上で傾いた文字を使用したい場合にこの値を指定します。
- oblique
- 斜体とは異なる、文字を少し斜めに傾けたスタイルを指定します。
italicと異なり、フォント自体が斜体に対応していない場合でも、文字が強制的に傾けられます。
font-weightプロパティを指定する
フォントの太さを設定します。
異なるフォントファイルで太字（bold）や細字（light）など、複数のバリエーションをサポートしている場合、@font-faceでそれぞれに対応するウェイトを以下のように設定します。
@font-face {font-family: 'CustomFont';src: url('/fonts/customfont-regular.woff2') format('woff2');font-weight: normal;}@font-face {font-family: 'CustomFont';src: url('/fonts/customfont-bold.woff2') format('woff2');font-weight: bold;}
font-weightプロパティに設定できる値
| font-weight 値 | フォントの太さ | 説明 |
|---|---|---|
| 100 | Thin | 最も細い |
| 200 | Extra Light | 極細 |
| 300 | Light | 細字 |
| 400 | Normal | 通常 |
| 500 | Medium | 中間の太さ |
| 600 | Semi Bold | やや太字 |
| 700 | Bold | 太字 |
| 800 | Extra Bold | 非常に太い |
| 900 | Black | 最も太い |
4. フォントを適用
定義したフォントを使用するには、以下のようにfont-familyを指定します。
body {font-family: 'CustomFont', sans-serif;}
フォントファイルのブラウザ別対応状況
TTF/OTF
WOFF
WOFF 2.0
HTML・CSS入門におすすめの1冊
もみじ
Web製作未経験でも読みやすい構成で、初学者でも安心して学習することができます。
実践的な内容を学ぶことができ解説も丁寧で分かりやすく、基礎的な内容はこの1冊で学ぶことができます。