Mikhail Kalashnikov Mikhail Kalashnikov - 1 month ago 7
CSS Question

Google Fonts looks different at google.com and at my web site

I just tried to use Google Fonts and have noticed the following disturbing effect:
The result of using the font at my custom html file is different from what's present on Google site.
At least the font size is definitely different (color is also different, but it doesn't matter).

Font: Slabo 27px, size: 112px

Link to the Google Fonts: https://fonts.google.com/specimen/Slabo+27px

The browser is the same: Firefox.


At google:

At google.com/fonts

At my site

On my site

HTLM code that I used:

<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>


main.css:

.end {
font-family: 'Slabo 27px';
font-weight: 400;
font-style: normal;
font-size: 112px;
color: #212121;
}


Any ideas what cause such effect??

Update:
Arrgh, it was just me being inattentive.

Google page turned out to be zoomed the whole time.

I compared them after zoom reset and confirmed that they are identical.

Answer

same, don't see difference, both have size 112px. https://jsfiddle.net/fp9j7L85/

<link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet">

enter image description here