Search code examples
csswebfontsgoogle-font-apigoogle-fonts

Google fonts weight not properly displayed

If I run the code below, the Josefine Sans font weight 400 looks bolder than weight 600. Can anyone explain why this is happening? 

body {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 24px;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:400,600" rel="stylesheet">
</head>

<body>
	<p style="font-weight:400;">The spectacle before us was indeed sublime.</p>
	<p style="font-weight:600;">The spectacle before us was indeed sublime.</p>
</body>
</html>

Solution

  • In my browser the 400 is lighter than the 600, so this might be computer specific.

    The most likely reason is that you have installed a faulty or incomplete version of the webfont locally/on your computer.