Fonts are loaded from fonts.gstatic.com

[FireMasterK]

Have you read the FAQ and checked for duplicate open issues? Yes

Is your feature request related to a problem? Please describe.

Shaka-Player UI library loads fonts from google's CDN.

Describe the solution you'd like

I would like to package these fonts/files myself.

Describe alternatives you've considered

I'm not sure

Additional context

[FireMasterK]

The source for this is: https://github.com/google/shaka-player/blob/c5af2be27a2256e699763e0570235b30838ed2aa/ui/controls.less#L15-L17

[TheModMaker]

I think if you override these fonts in your CSS, then the browser will load yours instead of these. Unfortunately since these are static CSS files, we can't set these at runtime based on configurations. But we could add something to the build scripts to replace it.

[FireMasterK]

But we could add something to the build scripts to replace it.

Would this reflect in the npm package too, or would I have to build it manually for this?

[joeyparrish]

What are we talking about replacing here? The CSS URL? Or the font URL from inside that CSS file?

[FireMasterK]

I'd like to be able to load the fonts from my servers, so that I don't need to use Google's cdn just for the fonts.

For this case, I think the css can be omitted (requiring them to be loaded externally), or the fonts could be distributed along with the package (without linking gstatic).

[demetrius-tech]

I also encounter this issue and would be nice to have it fixed soon. What "priority:P3" means?

[joeyparrish]

I don't know the distribution terms of Google's fonts offhand. It's possible that they could be distributed with the player, but caching performance will be better if a common URL is used across sites. A user who has used any other app with those fonts will have them in cache when they visit your app, and vice-versa.

May I ask why the fonts must be distributed from your server?

If you really insist on it, you can always choose to modify the font URL yourself. This is, after all, open source.

[joeyparrish]

@demetrius-tech, the descriptions of each label can be seen in the project's labels list or by mousing over the label. Our priority system goes from P0 (most urgent) to P4 (least urgent), with specific guidelines for each based on impact and severity.

[demetrius-tech]

@joeyparrish Thank you for your answer. For security reasons, we cannot access external resources. In case there is no solution to this, then I will look for an workaround.

[joeyparrish]

Have you tried overriding the font face rule with your own CSS? You wouldn't even have to modify the existing CSS, I think.

[sunknudsen]

For privacy reasons, I self-host fonts in my React apps.

I installed shaka-player and use custom version of node_modules/shaka-player/dist/controls.css removing @font-face declarations and replacing font-family attributes.

.shaka-video-container .material-icons-round {
  font-family: "Material Icons Rounded";
  font-size: 24px;
}
.shaka-video-container * {
  font-family: "Roboto Mono", monospace;
}

I then installed @fontsource/material-icons-rounded and @fontsource/roboto-mono and import fonts.

Works flawlessly…

That said, feels like loading whole font (162.99 kB) only to use a handful of icons could be greatly optimized.

Would be great if this repo shipped with a custom version of font that only includes used icons.

[sunknudsen]

Would be great if this repo shipped with a custom version of font that only includes used icons.

I used FontForge to open material-icons-rounded-all-400-normal.woff2, create subset of @fontsource/material-icons-rounded running following script using “Execute Script…“ (see docs) and, finally, generate woff and woff2 files (used enums.js to make sure I include all icons used by Shaka).

fontforge.activeFont().selection.select("fullscreen","fullscreen_exit","close","closed_caption","closed_caption_disabled","done","language","picture_in_picture_alt","branding_watermark","arrow_back","settings","volume_up","volume_off","cast","cast_connected","more_vert","fast_rewind","fast_forward","play_arrow","slow_motion_video","pause","repeat","repeat_on","airplay","replay","insert_chart_outlined","insert_chart","u0020","u005F",("ranges",None),"0","9",("ranges",None),"a","z").invert()

As a result, material-icons-rounded-all-400-normal-subset.woff2 is 50 times smaller than original material-icons-rounded-all-400-normal.woff2 (3KB vs 167KB). 🚀

See Archive.zip.

[joeyparrish]

That's a great result!

But I think my preference would be if we stopped using the icon font entirely, and just used SVGs instead. See #2467. Any objections to closing this issue in favor of that solution?

If anyone feels motivated to make the change, SVG icons can be had from here: https://github.com/marella/material-design-icons/tree/main/svg#readme

[github-actions[bot]]

Closing due to inactivity. If this is still an issue for you or if you have further questions, the OP can ask shaka-bot to reopen it by including @shaka-bot reopen in a comment.