I have this problem that in my game some text is rendered in a system font before the google font is loaded. After a page reload, when the font is already cached, everything works fine. So I want to start rendering only after fonts are loaded. It’s a common problem but somehow with a Phaser project based on the official typescript template, I can’t seem to solve it and I’ve tried a whole day now and am beginning to lose my sanity.
I think I’ve tried every possible solution that google spit out: First I tried to use webfontloader directly, then Rex’s webfont plugin. I tried the CSS font loading API, also cloakedninja’s plugin. I edited TS and Rollup configs, tried various import methods. When I managed to make the compile error go away, it would result in some kind of runtime error.
So I lost track about why things were failing and I set up a fresh Phaser 3 project to demonstrate my issue and hopefully get some help. I followed this tutorial to set up a webfont loader. When I try to build I get the following error: 'default' is not exported by node_modules/webfontloader/webfontloader.js, imported by src/webfontfile.ts. This is the most common error that I saw in all the things I tried in the last 24 hours. Please, if anybody had any luck using webfonts in phaser with typescript please help me. Thanks!
Thank you for replying! It solves this one error but I get another one instead: (!) Missing exports https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module src/webfontfile.ts load is not exported by node_modules/webfontloader/webfontloader.js 29: throw new Error("Unsupported font service"); 30: } 31: WebFont.load(config); ^ 32: }; 33: return WebFontFile;
I’ve tried import WebFont = require("webfontloader"); which results in
Import assignment cannot be used when targeting ECMAScript modules. Consider using 'import * as ns from "mod"', 'import {a} from "mod"', 'import d from "mod"', or another module format instead.
You are trying to fix a Rollup order issue.
If you look at Rex’s code, you’ll see he’s doing basically exactly what you’re trying to do (also with webfontloader).
So just use that, and if that doesn’t work, put that problem on github. Without rollup please
Rex’ plugin doesn’t work for the same reason, so it’s not an issue with his plugin.
[!] Error: ‘default’ is not exported by node_modules/webfontloader/webfontloader.js, imported by node_modules/phaser3-rex-plugins/plugins/loader/webfontloader/WebFont.js https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
node_modules/phaser3-rex-plugins/plugins/loader/webfontloader/WebFont.js (1:7)
Plus it’s not exactly TS compatible, I have to decorate my code with //@ts-ignore a bit to make the plugin run.
As I said, I’m working with the “official” Phaser3 TS template here. If a related rollup configuration issue is to blame, maybe somebody has run into the same issues when using webfonts…?
