Web installation causes error on Google Chrome / Ubuntu

[infojunkie]

Expected Results

Following the instructions at https://www.alphatab.net/docs/getting-started/installation-web/ should generate a rendered score.

Observed Results

Following the instructions at https://www.alphatab.net/docs/getting-started/installation-web/ generates the error

[AlphaTab][Rendering] Could not load font 'Georgia' within X seconds

that keeps repeating every 5 seconds.

Steps to Reproduce

1. Open https://www.alphatab.net/docs/getting-started/installation-web/ on Google Chrome as versioned below
2. Open JS console
3. Observe the error above

Further details

Works correctly on Firefox 85.0.1 (64-bit)

Your environment

Version

• 1.0
• 1.1
• 1.2
• 1.3-alpha.##

Flavor

• JavaScript
• .net

System
Google Chrome Version 88.0.4324.150 (Official Build) (64-bit)
Ubuntu 20.04

[Danielku15]

Thanks for reporting this finding.

The error already explains why you do not see the anything rendered: You need to have the font "Georgia" installed on your system. But there is maybe a bit more needed to fully understand how this is caused and resolved: alphaTab waits until all configured fonts are loaded before rendering. This is required for various operations (text measuring, and avoiding strange symbols displayed on HTML5 canvas rendering) and this also allows also the usage of custom Web Fonts together with alphatab.

The default fonts of alphaTab are listed on the following page and can be customized:
https://alphatab.net/docs/reference/settings/display/resources/#fonts

Unfortunately on Linux distributions there is not much consistency on what is shipped. Most other operating systems (at least all I tested in the past via BrowserStack) were working fine.
https://markoskon.com/system-fonts/
https://www.granneman.com/webdev/coding/css/fonts-and-formatting/default-fonts

If you need to support Ubuntu, I recommend configuring the fonts. I will close this bug report as it is per-design and no bug.

Feel free to open a discussion or a feature request if you have ideas on how alphaTab can be improved to fit your needs out of the box.

[infojunkie]

Thanks. I think there is more to dig here because it works correctly on Firefox on the same machine / OS as per the original report.

[juandspy]

Thanks. I think there is more to dig here because it works correctly on Firefox on the same machine / OS as per the original report.

@infojunkie have you solved it? For me it's only working in Firefox too.

[infojunkie]

No, the maintainer seems to think it's a client configuration issue, so I didn't consider this project further.

[Danielku15]

@juandspy You could simply configure other fonts where you know they are available on the operating systems you are targeting: https://alphatab.net/docs/reference/settings/display/resources/ Georgia as serif-font is just the defaults we ship but you can easily adjust it using the settings.

But whatever you configure as font, you need to ensure somehow that it is available on the client machine. e.g. by using WebFonts.We are using the CSS Font Loading APIs to detect whether fonts are ready and loaded before we do any rendering. This is needed for layouting purposes (and of course on raster graphics like HTML5 canvas to draw correctly).

Technically there would be the possibility to add support for font lists, but considering the feedback on this topic there was not much interest or need.

[juandspy]

@Danielku15 I will try that. Thanks for the explanation! Apart from that, it's interesting that:

1. In ~8 years using Linux distros, IIRC this is the first time I face this error in a web page.
2. It only happens in Chrome. Firefox works fine, so the font must be installed in the system.

[Danielku15]

Reopening this issue to investigate further and provide a solution to it. Especially the info from @juandspy is interesting: It should work consistently in the browsers.

[juandspy]

Please, ping me if you need anything from my side @Danielku15 .

[Danielku15]

Would be good to know what exact distro and Browser Versions you were testing with. I would have started now simply with the latest Ubuntu to see how it behaves (unfortunately Browserstack does not have Linux distros so I have to setup a local VM 😞 )

[juandspy]

Would be good to know what exact distro and Browser Versions you were testing with. I would have started now simply with the latest Ubuntu to see how it behaves (unfortunately Browserstack does not have Linux distros so I have to setup a local VM disappointed )

@Danielku15 I'm using Fedora 35. It's not a clean installation as I've been using it for some months. The browser versions are:

• Google Chrome 101.0.4951.64 (Official Build) (64-bit): [AlphaTab][Rendering] Could not load font 'Georgia' within 5 seconds
• Mozilla Firefox 99.0.1 (64-bit): working perfectly.
• Brave 1.38.111 (Chromium: 101.0.4951.54 (Official Build) (64-bit)): [AlphaTab][Rendering] Could not load font 'Georgia' within 5 seconds

[Danielku15]

Update: It seems that Firefox somehow does an automatic fallback to other fonts while Chrome just reports the font as missing. Firefox uses some font called Noto Serif and seemingly reports it as Georgia being available and loaded:

(Tested on Fedora 36)

[juandspy]

Interesting. I tried with:

    const settings = {
        file: "{{include.source}}",
        player: {
            enablePlayer: true,
            soundFont: "https://cdn.jsdelivr.net/npm/@coderline/alphatab@latest/dist/soundfont/sonivox.sf2",
            scrollElement: wrapper.querySelector('.at-viewport')
        },
        display: {
            resources: {
                wordsFonts: 'Noto Serif'
            }
        }
    };
    const api = new alphaTab.AlphaTabApi(main, settings);

but it still says [AlphaTab][Rendering] Could not load font 'Georgia' within 10 seconds. Am I using the API the right way?

[Danielku15]

@juandspy Sorry for the late response on your last question. You only changed one setting from Georgia to Noto and therefore it still waits for Georgia to be there. Notice the defaults here: https://alphatab.net/docs/reference/settings/display/resources/#resources

I made now in 1.3 an improvement where we support font lists and we ship now by default a config like Georgia, sans-serif which ensures a proper fallback to system defaults. I made tests on Fedora and the feature works as expected.

[juandspy]

thanks a lot @Danielku15 ! When is the 1.3 release including these changes?

[Danielku15]

@juandspy I have no committed date for the release. Mainly due to heavy obstacles with Kotlin the 1.3 is already delayed. That's why I plan an intermediate 1.2.3 release with various fixes and improvements I made in the meanwhile. But also for 1.2.3 I have no committed date.

It heavily depends on my available time to work on alphaTab and how many other bugs are reprorted on 1.2 which might need to go into 1.2.3