Typography Adjustments, no FOUT about kleiderordnung-berlin HOT 4 CLOSED

We can define and adjust custom fallback fonts, as explained by Simon Hearne and others. But using f-mods (ascent-override, descent-override, line-gap-override, advance-override), we can only adjust vertical glyph sizes, so that's not really helpful against flash of unstyled font. We can (and do) control container sizes to prevent layout shift.

https://www.speedkit.com/blog/reducing-layout-shift-with-custom-fallback-fonts/#How to Define Custom Fallback Fonts

There are still some important aspects to be learned, including the useful font drop online tool.

Calculating the required values might seem complex, but the information we need is already in your web font file. First you'll need the TTF or WOFF(2) file for your font; if you use Google Fonts then you can check find the TTF in the GitHub repository. If you have licensed a font from a foundry then the TTF should have been supplied already.

Once you have the font file, head on over to FontDrop and upload the file. Open the Data tab and scroll to the hhea - Horizontal Header Table. There you should find four key values: ascender, descender , line-gap and advanceWidthMax.

https://fontdrop.info/

https://simonhearne.com/2021/layout-shifts-webfonts/#reduce-layout-shift-with-f-mods

from kleiderordnung-berlin.

With such limited opportunities for fallback font adjustment, there is not much to be done, except to ensure layout does not shift, which it does not do anymore due to better container control already implemented before.

from kleiderordnung-berlin.

Contact form fonts not fine on Edge on Windows (and on mobile Chrome, see #46 (comment))

from kleiderordnung-berlin.

Contact Form Style Follow-Up in #46

from kleiderordnung-berlin.