font-weight for custom fonts

Question

I'm using my custom fonts defined like this:

@font-face {
  font-family    : 'LatoWeb';
  src            : url('../resources/fonts/Lato-Regular.woff') format('woff');
  font-style     : normal;
  font-weight    : normal;
  text-rendering : optimizeLegibility;
}

What's interesting is that I don't have font-weight variations for this font. However, starting from font-weight: 600 the font gets bolder, how's that possible? Where does it take the font if it's not loaded?

Answer 1

@font-face {
  font-family    : 'LatoWeb';
  src            : url('../resources/fonts/Lato-Regular.woff') format('woff');
  font-weight    : normal;
  font-style     : normal;
  text-rendering : optimizeLegibility;
}

also you can use:

for example :
font-weight:normal
font-weight:bold

100    Extra Light or Ultra Light
200    Light or Thin
300    Book or Demi
400    Normal or Regular
500    Medium
600    Semibold, Demibold
700    Bold
800    Black, Extra Bold or Heavy
900    Extra Black, Fat, Poster or Ultra Black