No offense, but your fonts look like junk.
You might not notice it at first, but sometimes when you translate fonts from photoshop, even with same type and thickness, they just don’t look the same.
Sometimes fonts look fuzzy and extra thick, and it’s especially obnoxious on custom, thin webfonts.
Don’t Panic! We can work around it.
Thankfully, this only shows up in Chrome on OS X, and there’s an easy fix!*
(*Yes, this is a fix. It restores consistency across browsers, matches what you see on google web fonts and other typography libraries, and delivers what designers expect when they use these same fonts & weights in photoshop.)
Seriously. Here’s the default. This line is a fuzzy thick mess.
Just set that CSS property on any element you want to fix the fonts in. Chrome defaults to “subpixel-antialised” which can look stronger & smoother on some LCD displays with black text on white. Unfortunately, it’s too thick and fuzzy when you’re using light text on a dark background, and it doesn’t match your the OS level font rendering on your machine.
Let’s look at some examples. Note that none of these are intended to be bold.
Source Code Pro: