独自のWebフォントを設置する

Webサイトに独自のフォントを指定する手順のメモ書きです。
主にダウンロードしたフォントや自作のフォントを表示させたい場合を想定しています。

1.Webフォントの設置
サーバの適当なパスに表示させたいWebフォントファイルを置きます。

2.フォントの定義
スタイルシートにフォントを定義します。
定義は以下のようになります。

@font-face {
	font-family: 'マイ　フォント';
	src: url('path/to/myfont.ttf');
}

font-familyに指定した’マイ　フォント’が独自のフォント名、’path/to/myfont.ttf’がWebフォントファイルへのパスです。

3.フォントの使用
独自のフォントが定義できたので、いつでもフォントが使用できるようになりました。
あとはWebフォントを使いたい箇所でフォントを指定すればOKです。

@font-face {
	<p>独自フォント未使用</p>
	<p style="font-family:'マイ　フォント'">独自フォント使用</p>
}

Webフォントファイルを置いて@font-familyでフォントを定義するだけなので簡単です。
人様のフォントを使用するときは規約の問題が絡むので注意が必要です。
逆に自作のフォントを用いる場合はそのような心配は要りません。

これでより個性的なサイトが作れるようになりますね！

ftvlog