force faux bold and oblique website fonts

today i found out about a little trick you can use to force the browser to synthesize its own bold and italic for a font, when you really want it to.

i wanted to change my font to be Geneva, to fit with my new Macintosh System 1 inspired theme. it doesn’t have bold and italic styles. with web fonts, if they don’t have bold and italic styles the browser will go ahead and imagine some. this is something people try to avoid. that’s great for Adobe but im different.

i’m not using web fonts (falling back to other fonts on other platforms). it doesn’t happen with local fonts, though, so what do we do?

@font-face {
  font-family: 'Geneva';
  font-style: normal;
  font-weight: normal;
  src: local('Geneva');
}

that’s right! define a web font @font-face whose only src is the local font you want, and state that it only has a “normal” style and weight.

you could also use this to have an alias for your font stack by adding more font names to the src, e.g. “src: local('Geneva'), local('Verdana');” but that’s probably an even worse idea than what i’m already doing!

let’s go