extra bold font showing as regular bold in Chrome

Question

I'm trying to use this font, Open Sans Extra-Bold: https://fonts.google.com/specimen/Open+Sans

For some reason I can't get it to show.

Any help?

JSFiddle: https://jsfiddle.net/0hhbgyrd/

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700,800');
div {
  font-size: 90px;
  font-family: Open Sans;
  text-transform: uppercase;
}

.normal {
  font-weight: 400;
}

.bold {
  font-weight: 700;
}

.extra-bold {
  font-weight: 800;
}

<div class="normal">
  Blog
</div>

<div class="bold">
  Blog
</div>

<div class="extra-bold">
  Blog
</div>

EDIT: Seems this works correctly in Firefox, but not in Chrome?

Chrome:

Firefox:

Answer 1

Fix the incorrect @import code provided by Google Fonts.

The import code they provide is causing problems for me as well, and it did not have the ' -marks before they updated the whole Google Fonts -page, so they kind of broke the code in the progress of their update.

I sent out a hotfix request few months back when they did not have the code wrapped inside (), which of course didn't work either. They fixed it but left the ' -marks in, so it works for some but certainly not for all.

So remove those ' -marks and it should work just fine:

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,800);

instead of

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700,800');

I also recommend using the correct font-family markup:

font-family: 'Open Sans', sans-serif;