I was messing around with a variable font the other day and noticed this weird rendering issue in the latest version of Chrome where certain parts of letterforms were clipping into each other in a really weird way. Thankfully, though, Stephen Nixon has come to the rescue with a temporary hack to fix the issue which using a text-shadow on the text that’s using the variable font:
.variable-font {
text-shadow: 0 0 0 #000; /* text color goes last here */
} Once you do that, you shouldn’t be able to see those weird clip marks in the letterforms anymore. Yeah, it feels pretty hacky but I’m sure this rendering bug will be fixed relatively soon. It doesn’t look like it affects other browsers, as far as I can tell.
Direct Link to Article — Permalink
The post Better rendering for variable fonts appeared first on CSS-Tricks.
Source: CSS-tricks.com