[#2030] Add option to upload and use custom fonts

[pi-sigma]

Taiga #2030

• Added option to upload custom fonts for text body and headings (only TTF fonts supported)
• Font files are automatically renamed when uploaded because we need to reference the filename when configuring font-faces in our CSS

[codecov-commenter]

Codecov Report

Attention: 3 lines in your changes are missing coverage. Please review.

Comparison is base (79332e4) 94.74% compared to head (735c79d) 94.79%.
Report is 9 commits behind head on develop.

Files	Patch %	Lines
src/open_inwoner/configurations/models.py	92.50%	3 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##           develop     #963      +/-   ##
===========================================
+ Coverage    94.74%   94.79%   +0.04%     
===========================================
  Files          872      876       +4     
  Lines        30546    30657     +111     
===========================================
+ Hits         28940    29060     +120     
+ Misses        1606     1597       -9     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[jiromaykin]

This is not a final review yet - these are some comments for deeper research.

[jiromaykin]

When i look in the admin, I see this odd title appear, would be nicer to have an explicit explanation there on using TTF files :-)

[pi-sigma]

The title on the StackedInline should disappear after running npm run build.

[Bartvaderkin]

Cool feature. As this is overwriting the same file/URL I foresee caching issues, where someone uploads new fonts and then nobody sees them because browser cache.

If that happens we might have to fix cache headers (like etag+revalidate instead of just age)

[jiromaykin]

Minor detail and not disapproved, but the message here may need to be more in 'active' language, something like "Upload body text font here. TTF font types only" - same as the one for the Headings.
Also I am wondering if we want this font upload to be all the way in the Admin bottom, instead of higher up, closer to the 'custom colors' section?

[pi-sigma]

I changed the messages, but moving the admin inline seems to require modifications to the admin template. Let's discuss and perhaps create a separate task for this.

[Bartvaderkin]

@pi-sigma to add to that: the amount of fields on the configuration singleton is getting a bit out of hand, so for that discussion we could also consider splitting the model, like in technical system configuration, content options, layout stuff and texts.

This could also make progress to getting rid of that crazy context-processor that just copies a pile of data from the singleton into a dictionary.

[pi-sigma]

Sounds good. We should come up with a good division though, lest we end up proliferating configuration types and creating something worse.

[alextreme]

Jiro wants to check the weird thing with italic stuff

[jiromaykin]

I'm not sure why (as it was working before) but when I upload any kind of TTF file, it does correctly end up in the Media directory, but I do not see anything happening on the front-end (perhaps we need a fallback font somewhere?).
Here you can download clearly different TTF fonts for testing: https://www.fontsquirrel.com/fonts/acme

[pi-sigma]

The font faces definitions were missing the custom fonts after rebasing. Also, I had to specify the font-family for our utrecht-heading. Should work now.

[jiromaykin]

Unfortunately the rendering does not work properly for Bold/Italic font styles if they aren't uploaded as well - the 'faux' rendering makes font-styling barely visible in Chrome and even strips the Bold styling from Card titles, so I'd say: only for the Body font you'll need to add upload options for ""regular"/"italic"/"bold"/"bold-italic". But keep the font-weight: bold; and font-style: italic; definitions for each individual font as needed.

In general: "every browser is doing its own thing in font rendering. ... Every browser seems to take its own approach to rendering font weight and anti-aliasing." Using a native bold-face and italic-face is the best way to counter browser differences.

I don't think it is necessary to add "italic" or "bold" uploads for Headings since this should be rendered as a different font anyway, so For Headings you can remove my original bold/italic definitions and probably only use:

@font-face { font-family: 'Heading'; src: url('/media/custom_fonts/heading_font.ttf') format('truetype'), url('/static/fonts/ubuntu/Ubuntu-M.ttf') format('truetype'); }

[alextreme]

FAILED (failures=3)

[jiromaykin]

Congrats, it is working!
Now Admins can do a lot of things...

outdated