unoplatform/uno

[WASM] Font preloading support

jeromelaban opened this issue ยท 6 comments

I'm submitting a...

  • Feature request

Current behavior

Fonts specified as WebFonts do not get loaded synchronously, making TextBlock based control measure their content incorrectly. Loading fonts using a data-uri is not a workaround.

Expected behavior

Fonts are loaded and measured properly.

Possible workaround

This works as a workaround, forcing fonts to load very early in the app's life cycle:

body::after {
    font-family: 'Symbols';
    background: transparent;
    content: "๎…Ÿ";
    opacity: 0;
    pointer-events: none;
    position: absolute;
}

Environment

Nuget Package: 

Package Version(s): 

Affected platform(s):
- [ ] iOS
- [ ] Android
- [x] WebAssembly
- [ ] Windows
- [ ] Build tasks

Visual Studio
- [ ] 2017 (version: )
- [ ] 2017 Preview (version: )
- [ ] for Mac (version: )

Relevant plugins
- [ ] Resharper (version: )

FontFace.load() could probably be used to fix this problem.
Doc: https://developer.mozilla.org/en-US/docs/Web/API/FontFace/load

The load() method of the FontFace interface loads a font based on current object's constructor-passed requirements, including a location or source buffer, and returns a Promise that resolves with the current FontFace object.

The FontFaceSet api may also help on this issue.

@jeromelaban / @carldebilly Interesting article here in my opinion:
https://nooshu.com/blog/2021/01/23/the-importance-of-font-face-source-order-when-used-with-preload/

A small change in the ordering of your font sources in the `@font-face` rule can have a big impact on data and web performance, especially when used in conju...

(@jeromelaban FYI, there is this item also unoplatform/Uno.Themes#733 to make sure it gets proper priority depending of the need)

Available in 4.6