Use variable font files #1833

New Issue

dpschen · 2021-09-22T18:50:43Z

dpschen commented

2021-09-22 18:50:43 +00:00

For the future it might make sense to use variable fonts.
If interested read some stuff about them e.g. here first: https://variablefonts.io/about-variable-fonts/#opsz

We are lucky! Both fonts do exist in a variable editon:

After beeing optimized the variable fonts will be much smaller (since there is just one file per font). Older browser can keep the current fonts as fallback.

Additionally we could do stuff like animate font-weight when hovering, etc. with them.

Right now the linked fonts in the repos above are not optimzed so that's some stuff that needs to happen before it makes sense to use them. I researched a bit and this is what I found out:

What makes the variable font files, that I linked, large is that they have much more OpenType features enabled and a lot of glyphs for all kind of languages that are not (yet) used by Vikunja.

I guess it makes sense to align the features of the current included font file with the variable font.

By using Googles woff2 library with woff2_decompress font.woff2 I could open the curently used non-variable font files through FontDrop (because it just supports ttf files). I could find out that the only OpenType feature the OpenSans currently uses is ligatures. The currently used Glyphs are just the Latin unicode-range.

With Glyphhanger it should be no problem to subset the font to Latin and use only the ligatures OpenType features

Maybe it makes even sense to add some beautiful features because of the saved space by using just one font. If you drag the ttfs from the repos above in FontDrop you can check out all the cool additional stuff that's available. Just to give an example: the mono-sized numbers might make sense for the task ids.

*Subsequent to https://kolaente.dev/vikunja/frontend/pulls/759* For the future it might make sense to use variable fonts. If interested read some stuff about them e.g. here first: https://variablefonts.io/about-variable-fonts/#opsz We are lucky! Both fonts do exist in a variable editon: - https://github.com/googlefonts/opensans/tree/main/fonts/variable - https://github.com/andrew-paglinawan/QuicksandFamily/blob/master/fonts/Quicksand%5Bwght%5D.ttf After beeing optimized the variable fonts will be much smaller (since there is just one file per font). Older browser can keep the current fonts as fallback. Additionally we could do stuff like animate font-weight when hovering, etc. with them. Right now the linked fonts in the repos above are not optimzed so that's some stuff that needs to happen before it makes sense to use them. I researched a bit and this is what I found out: --- What makes the variable font files, that I linked, large is that they have much more OpenType features enabled and a lot of glyphs for all kind of languages that are not (yet) used by Vikunja. I guess it makes sense to align the features of the current included font file with the variable font. By using Googles [woff2](https://github.com/google/woff2) library with `woff2_decompress font.woff2` I could open the curently used non-variable font files through [FontDrop](https://fontdrop.info/) (because it just supports ttf files). I could find out that the only OpenType feature the OpenSans currently uses is ligatures. The currently used Glyphs are just the `Latin` unicode-range. With [Glyphhanger](https://www.zachleat.com/web/glyphhanger/) it should be no problem to subset the font to Latin and use only the ligatures OpenType features Maybe it makes even sense to add some beautiful features because of the saved space by using just one font. If you drag the ttfs from the repos above in FontDrop you can check out all the cool additional stuff that's available. Just to give an example: the mono-sized numbers might make sense for the task ids.

dpschen referenced this issue from vikunja/frontend

2021-09-22 18:56:25 +00:00

feat: reduce file size by removing by removing fonts #759

konrad commented

2021-09-23 18:33:07 +00:00

Sounds really promising! I didn't know variable fonts were a thing. I think it would make sense to explore this further.

👍 1

konrad added the

kind/feature

label 2021-09-23 18:33:14 +00:00

Sign in to join this conversation.