-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[WASM] - Custom Fonts loading time #4968
Comments
Anything that involves network requests (including fonts loading) will take some time to complete. Therefore, it can be barely noticeable if the connection is fast and the latency is low. But If the connection is not so fast, the UX is indeed affected. What are the options to improve the situation:
Could you please point to the place in code where you currently do Fonts loading? |
An improvement: internal val labelTypography: Typography
@Composable
get() {
val ff = helveticaNeueFontFamily // call getter only once, so the `fetch` wan't happen every time
return Typography(
displayLarge = MaterialTheme.typography.displayLarge.copy(fontFamily = ff),
displayMedium = MaterialTheme.typography.displayMedium.copy(fontFamily = ff),
displaySmall = MaterialTheme.typography.displaySmall.copy(fontFamily = ff),
headlineLarge = MaterialTheme.typography.headlineLarge.copy(fontFamily = ff),
headlineMedium = MaterialTheme.typography.headlineMedium.copy(fontFamily = ff),
headlineSmall = MaterialTheme.typography.headlineSmall.copy(fontFamily = ff),
titleLarge = MaterialTheme.typography.titleLarge.copy(fontFamily = ff),
titleMedium = MaterialTheme.typography.titleMedium.copy(fontFamily = ff),
titleSmall = MaterialTheme.typography.titleSmall.copy(fontFamily = ff),
bodyLarge = MaterialTheme.typography.bodyLarge.copy(fontFamily = ff),
bodyMedium = MaterialTheme.typography.bodyMedium.copy(fontFamily = ff),
bodySmall = MaterialTheme.typography.bodySmall.copy(fontFamily = ff),
labelLarge = MaterialTheme.typography.labelLarge.copy(fontFamily = ff),
labelMedium = MaterialTheme.typography.labelMedium.copy(fontFamily = ff),
labelSmall = MaterialTheme.typography.labelSmall.copy(fontFamily = ff),
)
} Also, give Also, using |
Nice tips, thanks!
✅ - this one shows significant improvements
✅
Where should I apply this one? The only <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Who'sNext</title>
<link rel="icon" type="image/x-icon" href="icon.png">
<script type="application/javascript" src="skiko.js"></script>
<script type="application/javascript" src="browserApp.js"></script>
<meta content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=3, user-scalable=yes" name="viewport">
</head>
<body>
<canvas id="WhosNext"></canvas>
</body>
</html> |
This is an example from a different app:
|
So, my final report: Using Tested on the slowest physical device I have:
No optimizations: no-opt.mp4Optimizations + 1.6.11: 1.6.11.mp4Optimizations + 1.7.0-dev1721: 1.7.0-dev1721.mp4@eymar I think we can close this issue and possible reopen if next Beta or RC breaks this, but I believe it would be very beneficial that this optimisations hints (especially the html one) could be documented. |
Please check the following ticket on YouTrack for follow-ups to this issue. GitHub issues will be closed in the coming weeks. |
Describe the bug
Depending on the platform we're running the
wasm
app, it is noticeable the loading time of custom fonts.Affected platforms
Versions
1.6.11
2.0.0
arm64
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Unnoticeable fonts loading time
Screenshots
Faster: OSX 14.5 (23F79) | Firefox 126.0.1:
osx.firefox.126.0.1.mov
Slow: Google Pixel 3a (971AYOZ223) Android 12 API 32 | Chrome 125.0.6422.113:
Google.Pixel.3a.971AYOZ223.Android.12.API.32.-.Chrome.125.0.6422.113.mp4
Slowest: Allwinner T8100 (T8100C045298) Android 10 API 29 | Chrome 126.0.6478.71:
Allwinner.T8100.T8100C045298.Android.10.API.29.-.Chrome.126.0.6478.71.mp4
The text was updated successfully, but these errors were encountered: