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.