【CSS】ダウンロードしたWEBフォントを@font-faceを使って指定するやり方

  • このページでは、ダウンロードしたWEBフォントをCSSで指定する方法について解説しています。

先日、プログラミングの練習で「お化け退治ゲーム」を作ったんですが、標準のフォントがマッチしてなくて、「もっとホラー感のあるフォントにできひんかなー」って思ってたんですよね。

で、何か方法がないか調べてたら、どうやら「@font-face」を使えばできるとのことで、やってみたところ下の画像のようにタイトルとお化けの名前がいい感じになりました。

まぁ、フォントをダウンロードして使うことって、僕の場合はそんなに無いんですけど、久しぶりに使うことになると「あれー、どうやって書くんだっけ?」となりかねないので、今後のためにやり方を残しておきます。

フォントを設定する前の準備

まず、当然ですがフォントファイルが必要なので、設定したいフォントを探してダウロードしておきましょう。

僕がお化け退治ゲームを作った時は「怨霊」というフォントをダウンロードして使いました。

フォントファイルの種類

フォントファイルの種類は色々ありますが。.ttf、.woffあたりが多いようです。僕がダウンロードした「怨霊」も.ttfファイルでした。



@font-faceの書き方

CSSファイル内で次のような形式でフォントファイルを指定すると、ダウンロードしたフォントが使えるようになります。

@font-faceの書き方
@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で指定する手順は終わりです。

WEBフォントをダウンロードして使ってみたいという人は、今回紹介した手順でやってみてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA