ティラノスクリプト（ティラノビルダー）でNoto Sans jpのフォントを設定する方法

ティラノビルダーを使ってノベルゲームを制作していると、デフォルトのフォントだけでなく、作品の雰囲気に合わせてフォントを変更したくなることがありますよね。

今回は、Googleフォントの「Noto Sans Japanese」（以下、Noto Sans Jp）をティラノビルダーに設定する方法を解説します。

Noto Sans Jpをダウンロードしよう！

ダウンロードしたファイルを特定のフォルダに格納しよう！

ダウンロードしたzipファイルを解凍し、中にあるフォントファイルをティラノビルダーの特定のフォルダに格納します。

CSSを設定しよう！

次に、ダウンロードしたフォントをティラノビルダーで使用できるように、CSSを設定します。

以下の手順でfont.cssファイルを編集してください。

1. ティラノビルダーのプロジェクトフォルダを開く
2. tyranoフォルダを開く
3. cssフォルダを開く
4. font.cssファイルをテキストエディタで開く

font.cssファイルを開いたら、以下のCSSコードをファイルの一番下に追加してください。

@font-face {
    font-family: 'NotoSansJPBlack';
    src: url('../../data/others/font/noto_sans_jp/NotoSansJP-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'NotoSansJPBold';
    src: url('../../data/others/font/noto_sans_jp/NotoSansJP-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'NotoSansJPExtraBold';
    src: url('../../data/others/font/noto_sans_jp/NotoSansJP-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'NotoSansJPExtraLight';
    src: url('../../data/others/font/noto_sans_jp/NotoSansJP-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'NotoSansJPLight';
    src: url('../../data/others/font/noto_sans_jp/NotoSansJP-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'NotoSansJPMedium';
    src: url('../../data/others/font/noto_sans_jp/NotoSansJP-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'NotoSansJPRegular';
    src: url('../../data/others/font/noto_sans_jp/NotoSansJP-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'NotoSansJPSemiBold';
    src: url('../../data/others/font/noto_sans_jp/NotoSansJP-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'NotoSansJPThin';
    src: url('../../data/others/font/noto_sans_jp/NotoSansJP-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

このCSSコードは、Noto Sans Jpの各ウェイト（太さ）のフォントファイルをティラノビルダーに登録するためのものです。

CSSコードの解説

font.cssファイルに追記したCSSコードは、Noto Sans Jpの各ウェイト（太さ）のフォントファイルをティラノビルダーに登録するためのものです。

具体的には、@font-faceというルールを使って、フォントファミリー名、フォントファイルの場所、フォントの太さなどを定義しています。

例えば、以下のコードは、Noto Sans Jpの太字をNotoSansJPBoldというフォントファミリー名で登録しています。

@font-face {
    font-family: 'NotoSansJPBold'; /* フォントファミリー名 */
    src: url('../../data/others/font/noto_sans_jp/NotoSansJP-Bold.ttf') format('truetype'); /* フォントファイルの場所 */
    font-weight: bold; /* フォントの太さ */
    font-style: normal; /* フォントのスタイル */
}

文字コードの注意点

font.cssファイルを編集する際は、文字コードがUTF-8であることを確認してください。文字コードがUTF-8でない場合、フォントが正しく表示されない場合があります。

ティラノスクリプトでフォントを指定しよう！

ティラノスクリプトでのフォント指定について

フォント指定の属性

ティラノスクリプトでフォントを指定するには、face属性以外にも、font-weight属性やfont-style属性を使用することができます。

• font-weight属性：フォントの太さを指定します。
• font-style属性：フォントのスタイルを指定します。

これらの属性を組み合わせて、より細かくフォントを指定することができます。

フォントを変更できるタグ

フォントを変更できるタグはglink以外にも、ptextやchara_nameなど、様々なタグでフォントを変更することができます。

例えば、ptextタグでNoto Sans Jpの細字を使用したい場合は、以下のように記述します。

[ptext face="NotoSansJPThin" text="こんにちは！"]

他のフォントの設定方法

Noto Sans Jp以外のフォントを設定する際にも、今回紹介した手順と同様の方法で設定することができます。

まずは、設定したいフォントをダウンロードし、ティラノビルダーのプロジェクトフォルダ内のdata/others/fontフォルダに格納してください。

次に、font.cssファイルに、ダウンロードしたフォントのCSSコードを追記してください。

最後に、ティラノスクリプトでフォントを指定すれば、設定したフォントを使用することができます。

まとめ

今回は、ティラノビルダーでGoogleフォントの「Noto Sans Japanese」を設定する方法を解説しました。

少し手間はかかりますが、この方法を使えば、あなたのノベルゲームの雰囲気に合わせて、様々なフォントを使用することができます。

ぜひ、いろいろなフォントを試して、あなたの作品にぴったりのフォントを見つけてください！

関連記事

• ティラノスクリプト公式サイト
• Google Fonts