I'm trying to use Lato from Google Fonts in my site. I see on fonts.google.com, Lato has distinct font weights, and they are obvious differences:
https://fonts.google.com/specimen/Lato
In practice, I'm not seeing much of a difference between these, which complicates design on my site.
Can anyone tell me if I'm using Lato and font weights properly, or show me how to use the font weights?
https://plnkr.co/Ng6Xk9S3TqGA2xzl7Nne
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato|Open+Sans:500,600,700,800" rel="stylesheet">
</head>
<style>
body {
font-family: 'Lato', sans-serif
}
</style>
<body>
<div style="font-weight:500">This is a test!</div>
<div style="font-weight:600">This is a test!</div>
<div style="font-weight:700">This is a test!</div>
<div style="font-weight:800">This is a test!</div>
</body>
Thanks to Andrew Li, I realized I was including font-weights for Open Sans, not Lato. Here's a fixed Plunkr:
https://plnkr.co/edit/9mKXYie2BdMvkf3uuvgn
The fix was: