The code structure in my HTML file includes a link to Google Fonts with the following call:
<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
Following that, I specify the font family and weight in the CSS section:
<style>
body {
font-family: 'Lato', sans-serif;
}
.textTime {
font-weight: 700;
}
</style>
In the body of the document, there is a text element defined as follows:
<div class="textTime">
from 6am to 6am
</div>
When rendered, it appears like this:
https://i.sstatic.net/W2hqj.jpg
However, by changing the font weight property to font-weight: 400; instead of 700, the rendering changes to this:
https://i.sstatic.net/dqgf1.jpg
My issue arises when the font renders correctly as Lato only at weight 400, not at 700.
This discrepancy occurs due to using CSS2 instead of CSS3, a limitation which cannot be altered.
How can I address this challenge?