CODEWITHSUNDEEP
htmlcssfontsfont-size
Mikhail Kalashnikov
Mikhail Kalashnikov

Reputation: 1186

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.

Upvotes: 1

Views: 392

Answers (2)

justtry
justtry

Reputation: 639

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

Upvotes: 1

Tristan de Jager
Tristan de Jager

Reputation: 115

I honestly don't see a difference. Apart from the color and size.

Yours looks a bit sharper. But I wouldn't complain about that.

Upvotes: 1

Related Questions