After experimenting with Google Fonts, I made a discovery that left me puzzled:
The font displayed in my custom HTML file is not the same as the one on the Google Fonts website.
Specifically, the font size appears to be significantly different (color variations don't concern me).
Font: Slabo 27px, size: 112px
Link to Google Fonts:
Browser used: Firefox.
Google site font display:
https://i.sstatic.net/EA9SA.png
My site font display:
https://i.sstatic.net/TN0na.png
HTML code snippet utilized:
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Slabo+27px">
<div class="end">
<p>Regular</p>
</div>
Contents of main.css:
.end {
font-family: 'Slabo 27px';
font-weight: 400;
font-style: normal;
font-size: 112px;
color: #212121;
}
Any insights into what could have caused this discrepancy?
Update:
Upon closer inspection, I realized my mistake.
It turns out that the Google page was zoomed in all along.
Once I reset the zoom and compared them again, they were indeed identical.