ティラノスクリプトで独自フォントを試したときのメモ

普段cssで外部フォントをあまり使わない人が、ティラノスクリプトで独自フォントを試してみようとして勝手にハマったというお話です。

解説通りにしたのに (してなかった) 反映されない!?となったので残しておきます。備忘録です。

そもそもの原因

@font-faceの書き方を知らなかったことに尽きる。

試すのは.ttfだけだからと不要な部分を適当に削除したし、ちょっとbackground-image: url(...)のノリで書いていた。

合ってる独自フォントの追加方法

フォントファイルはdata/othersに入れました。

tyrano/css/font.css

@font-face {
  font-family: "PixelMplus10";
  /* 1種類のとき */
  src: url("../../data/others/PixelMplus10-Regular.ttf") format("truetype");

  /* 複数のとき */
  src: url("../../data/others/PixelMplus10-Regular.ttf") format("truetype"),
      url("../../data/others/PixelMplus10-Regular.woff") format("woff");
}

フォントが1種類のとき、末尾はセミコロン。複数のときはカンマで繋いで最後にセミコロン。font-familyにフォント名を書くのを忘れずに。

data/system/Config.tjs

// ◆ 文字の書体
;userFace = PixelMplus10, 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;

とりあえず先頭にフォント名を追加しておいたら反映されるはず。

おわりに

@font-face理解しました。

参考リンク

@font-face - CSS: カスケーディングスタイルシート | MDN