Chrome svg-Font-Rendering breaks Layout

Question

I\'m currently working on a little Project in which I\'d like to use webfonts via @fontface.

I implemented the font\'s like this:

@f         


        

Answer 1

The fix is in the duplication of the @font-face rule.

You don't necessarily need it in a media query in the Quka's answer, though that's a nice way to only target webkit browsers.

If you duplicate your @font-face declaration exactly as (svg first for better rendering), and paste it below the original, the funky layout/draw issues are gone.

Just calling out that the media query isn't important here—it's the duplicated rule. This is such a weird bug. So dumb.