What's wrong with my fonts?

I'm currently trying to replicate the AO3 standard style for self-hosting my fanfiction. See the following example: AO3 version vs my CSS version.

So far I am pretty satisfied with how close they look. There's just one obvious problem: When using the Ludica Grande font, it simply doesn't look as thin as the one on AO3. I've copied the entire font CSS from AO3, but still no result. I've been trying to get a similar result with other font (Lunamisa and Lucida Unicode), but then I noticed that none of these custom fonts are displaying bold text. With Lunamisa I've inserted the CSS and script per Google's instruction, but bold text still isn't displaying.

Between the two issues, I care more about bold text showing up as it should. Can anyone help me with that? All three custom fonts are in the CSS, so you can compare in the live example.

A bonus would be understanding why my Lucida Grande looks different from AO3's. Is it because they are using a commercial version with more options? How can I force that font-weight myself?

AO3 code

Code

body, .toggled form, .dynamic form, .secondary, .dropdown {
  background: #fff;
  color: #2a2a2a;
  font: 100%/1.125 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Helvetica, sans-serif, 'GNU Unifont';
  margin: 0;
  padding: 0;
}

My code (font-size and line-height are deliberately different)

Code

body {
  background-color: #333332;
  font-size: 0.95em;
  font-family: "Lunasima", "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, sans-serif;
  line-height: 1.4;
  font-style: normal;
  margin: 0;
  color:#eee;
}