- このページでは、ダウンロードしたWEBフォントをCSSで指定する方法について解説しています。
先日、プログラミングの練習で「お化け退治ゲーム」を作ったんですが、標準のフォントがマッチしてなくて、「もっとホラー感のあるフォントにできひんかなー」って思ってたんですよね。
で、何か方法がないか調べてたら、どうやら「@font-face」を使えばできるとのことで、やってみたところ下の画像のようにタイトルとお化けの名前がいい感じになりました。
まぁ、フォントをダウンロードして使うことって、僕の場合はそんなに無いんですけど、久しぶりに使うことになると「あれー、どうやって書くんだっけ？」となりかねないので、今後のためにやり方を残しておきます。
フォントを設定する前の準備
まず、当然ですがフォントファイルが必要なので、設定したいフォントを探してダウロードしておきましょう。
僕がお化け退治ゲームを作った時は「怨霊」というフォントをダウンロードして使いました。
フォントファイルの種類は色々ありますが。.ttf、.woffあたりが多いようです。僕がダウンロードした「怨霊」も.ttfファイルでした。
@font-faceの書き方
CSSファイル内で次のような形式でフォントファイルを指定すると、ダウンロードしたフォントが使えるようになります。
@font-face {
font-family: '任意のフォント名';
src: url('フォントファイルのパス') format('フォーマット名');
}「任意のフォント名」は何でもいいです。僕は今回は’onryou‘としました。
「フォントファイルのパス」はCSSファイルがある場所から、フォントファイルのある場所までのパスを指定します。
例えば、下のようなディレクトリ構成で、「css」フォルダの中にcssファイル、「fonts」フォルダの中に「onryou.ttf」というフォントファイルが入っていたとすると、パスは「../fonts/onryou.ttf」となります。
そして、「フォーマット名」ですが、これはファイルの種類によって異なるので、下の表を参考に設定してください。
| format | 拡張子 |
| format(‘woff‘) | .woff |
| format(‘truetype’) | .ttf |
| format(‘opentype‘) | .otf |
| format(‘embedded-opentype‘) | .eot |
| format(‘svg‘) | .svg / .svgz |
今回、僕が作ったゲームを例に挙げると次のように書いています。
@font-face {
font-family: 'onryou';
src: url('../fonts/onryou.ttf') format('truetype');
}設定したい要素にfont-familyを指定する
上のコードをCSSに書いたら、あとはfont-familyで指定するだけです。
body {
font-family: 'onryou', sans-serif
}
この例のように書くと、body要素、つまり全体のフォントが「怨霊」のフォントに変わります。
最後に
以上で、ダウンロードしたフォントをCSSで指定する手順は終わりです。
