[Question] Using a font family that isn't installed on the system?

[hexenwerkgames]

I have problems with using a font in-game that isn't installed on my system. I added the font via css: @font-face { font-family: "Press Start 2P"; src: local("Press Start 2P"), local("PressStart2P-Regular"), url("assets/press-start-2p-v8-latin-regular.ttf") format("truetype"), url("assets/press-start-2p-v8-latin-regular.woff2") format("woff2"), url("assets/press-start-2p-v8-latin-regular.woff") format("woff"); }

and with fontFamily in my game.js:

init: function() { this._display = new ROT.Display({width: this._screenWidth, height: this._screenHeight + 1, fontSize: 22, fontFamily: "Press Start 2P", });

I can use any font in-game that is installed on my system (and not only the default system fonts), but I want to use a font that I put into the asset folder of my game. The font is only shown correctly in the body of my index.html though. Unfortunately I don't know if I'm doing anything wrong or if rot.js just doesn't support that.

[ondras]

Hi,

you should definitely be able to use custom fonts with rot.js. I did that many times in the past, including The Royal Wedding and Sleeping Beauty.

The problem you might be running into can be related to timing. You see, loading these external fonts is an asynchronous operation and the Browser often offloads downloading font files to a later stage of its rendering pipeline. So you might end up in a situation where you start drawing stuff into rot.js canvas, but your font files were not downloaded yet. This will result in rendering with a default/fallback font instead.

To confirm this, try the following:

• use your Press Start 2P font somewhere on the page (to force the browser to download it),
• wait for several seconds,
• draw some characters via rot.js.

Ideally, this should result in your characters drawn with the correct font. Please let me know about the outcome. If the problem is not solved, please make the demo-page available somewhere online (including font files) so I can have a look myself.

[kosinaz]

You can check mine too. I use three different custom fonts in it. https://github.com/kosinaz/spectrl

[blinkdog]

Some other articles that might help with the browser timing issues:

• How to load web fonts to avoid performance issues and speed up page loading
• CSS Font Loading API @ MDN

[hexenwerkgames]

Thank you very very much! I didn't expect answers that soon! :) Since I did my font experiments locally, I'm not sure if it could have been a problem with loading time, but: I used the font family now directly in a div I had included in the html anyway, and this was all that was needed to make it work.

Thanks to all of you for your recommendations! Now I can go on playing around with other fonts. ;)

[ondras]

Since I did my font experiments locally, I'm not sure if it could have been a problem with loading time, but: I used the font family now directly in a div I had included in the html anyway, and this was all that was needed to make it work.

This is not related to the speed of your network :-)

If you were not using the font via CSS means, the browser simply did not download the font at all. Your first font usage - via rot.js's canvas - instructed the browser to start downloading it. But this operation is asynchronous and due to the nature of the Event Loop in JS, there is no way the font would be available for your draw calls. The browser would download the font files in the background and make them available no sooner than after the current batch of JS ends executing.