Open Sans 300 no Cabeçalho Personalizado

Suporte
1

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(http://fonts.googleapis.com/css?family=Open+Sans);

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?

2

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

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

see Google Fonts

4 curtidas
3

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.

4

Maybe you are viewing fall-back font or your system having that font already.
you can see in source code here http://fonts.googleapis.com/css?family=Open+Sans. It only having source definitions for 400 weight.

3 curtidas
5

This topic was automatically closed after 2701 days. New replies are no longer allowed.