How do I use my own font from a .ttf or .otf file in a Twine adventure?

Question

Hello folks!

Using SugarCube 2.21!

There are various websites and programs (like Calligraphr.com and Fontstruct.com) that allow you to make your own fonts and download them as a .ttf or .otf file. I would really love to make my own fonts to use in my Twine adentures, but how do I use my .ttf or .otf files in Twine?

Thank you all!

Patrick

Answer 1

I suggest reading the answer to the How i import font from my computer? question.

Comments

In addition to that, if you're importing a CSS file that loads those fonts, the CSS file has to be in the same directory as the HTML file (for security reasons) if you want that to work in Firefox.

---

Would this work for other people, or just on my computer which has the fonts downloaded?

---

In order for that to work for other people you'd need to include the font in the download, as Chapel described in the answer he linked to.

That said, you'll probably need to have the font in the same directory as the HTML if you want it to work in Firefox.

---

So to have it in the same folder:

@font-face {
    font-family: my-font;
    src: url("my-font.otf");
}

And I can do multiple fonts this way, I suppose, by repeating this with different files?

And if I am now interpreting his answer right, to package it means I need to put the html and font file in a zip file, and treat the zip file as the game file? I shall try that on Itch.io. Ah, it says there has to be an index.html file in the zip file; where do I get that? Or is it actually not always necessary?

---

Rename your game file to index.html.

---

Ah! Very good. I will be using this. Thank you!