I'm using a font via @font-face with really bad default kerning (letters butt right up against each other) which is a quick fix with letter-spacing. The problem is that the kerning on the fallback fonts is fine and a wider letter-spacing makes it look bad and, in the case of the site navigation, overflows containers that (under normal spacing) should fit their contents.

I tried putting a letter-spacing property in the @font-face definition not really expecting it to work and it didn't. Is there any way to do this?

  • when are your fall back fonts going to be used? I understood @font-face to have full browser support Tony Crockford over 7 years ago

2 answers

danwellman 5600
This was chosen as the best answer

You could use moderniser and add a different letter-spacing to the no-fontface class

Answered over 7 years ago by danwellman

To answer my comment, if you're worried about mobile devices that don't support @font-face then you could use media-queries to avoid their use (and serve different letter spacing) see:


@font-face covers 92% of browsers in use apparently, so if you remove the mobile ones as well, the minor numbers that see too wide fall backs should be minimal?

Answered over 7 years ago by Tony Crockford