Open Sans 300 in Custom Header

Trying to add a custom header (to match my primary site and take users back, if needed). My brand logo uses Open Sans 300 light (with 4px letter spacing, not important). So:

@import url(;

Then I style it:

.top-brand-nav-link {
  font-family: "Open Sans";
  font-weight: 300;
  font-size: 25px;
  letter-spacing: 4px;

Anyway, it all works and the header looks fine except that the font weight is off! It gives me Open Sans 400 (not 300)! I’m a little puzzled because when I change font-weight to 600 (semibold) or 700 (bold), it gets styled correctly (so my code should be fine). Obviously 400 is fine, but I cannot seem to get it to 300 (light). 300 just gives me 400.:sweat:

Any idea why?

if you need 300 weight your import url should be like below I guess

@import url(',400');

see Google Fonts


That worked. Thanks for the quickest reply ever.

Quick followup - why does 600, 700 weight work without the need to specify it in the import url? Asking just for personal learning reasons.

Maybe you are viewing fall-back font or your system having that font already.
you can see in source code here It only having source definitions for 400 weight.