【PR】を含みます。

フロントエンド

【CSS】フォントファイルをサーバーにアップロードしてfont-familyに反映する手順

CSS フォントファイルをサーバーにアップロードしてfont-familyに反映する手順

サーバーにアップロードしたフォントファイルを読み込んで、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つのファイル指定でも大丈夫です。

フォントファイルのブラウザ別対応状況はこちら

CSS
Copy
  1. @font-face {
  2.   font-family: 'CustomFont';
  3.   src: url('/fonts/customfont.woff2') format('woff2'),
  4.        url('/fonts/customfont.woff') format('woff'),
  5.        url('/fonts/customfont.ttf') format('truetype');
  6.   font-style: normal;
  7.   font-weight: normal;
  8. }

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でそれぞれに対応するウェイトを以下のように設定します。

CSS
Copy
  1. @font-face {
  2.   font-family: 'CustomFont';
  3.   src: url('/fonts/customfont-regular.woff2') format('woff2');
  4.   font-weight: normal;
  5. }
  7. @font-face {
  8.   font-family: 'CustomFont';
  9.   src: url('/fonts/customfont-bold.woff2') format('woff2');
  10.   font-weight: bold;
  11. }

font-weightプロパティに設定できる値

font-weight 値フォントの太さ説明
100Thin最も細い
200Extra Light極細
300Light細字
400Normal通常
500Medium中間の太さ
600Semi Boldやや太字
700Bold太字
800Extra Bold非常に太い
900Black最も太い

4. フォントを適用

定義したフォントを使用するには、以下のようにfont-familyを指定します。

CSS
Copy
  1. body {
  2.   font-family: 'CustomFont', sans-serif;
  3. }

フォントファイルのブラウザ別対応状況

TTF/OTF

Data on support for the ttf feature across the major browsers from caniuse.com

WOFF

Data on support for the woff feature across the major browsers from caniuse.com

WOFF 2.0

Data on support for the woff2 feature across the major browsers from caniuse.com

HTML・CSS入門におすすめの1冊

アイコン画像

もみじ

Web製作未経験でも読みやすい構成で、初学者でも安心して学習することができます。

実践的な内容を学ぶことができ解説も丁寧で分かりやすく、基礎的な内容はこの1冊で学ぶことができます。

-フロントエンド
-