Romaric Pascal

Adjust font size with CSS custom properties

Screenshot of “Adjust font size with CSS custom properties”

https://romaricpascal.is/posts/adjust-font-size-css-custom-properties/

I do love beautiful Web fonts, even if there are none on this site currently, so I plan to add at least one soon. I might use this nice solution.

The aim is to make the loaded font match the fallback font's height. So until that final font is loaded, we don't want to be scaling anything (either through font-size-adjust or custom properties). Before we get to the CSS, let's take care of that by loading the fonts using JavaScript and set a class on the element when they're done.

  3. Do you know good tutorials and/or examples about dealing with responsive images that are fluid horizontaly, but with a fixed height?

    Using object-fit: cover; in the CSS is easy, but how can we prevent loading many pixels that will be hidden, without using too many <source> in a <picture>?