Different rendering of Google Fonts if is added with @font-face or standard stylesheet link?

Question

I don't know how is possible... There is a different rendering if i use a google fonts with @font-face (Created with localfont.com) or if i use standard link stylesheet (download from google server).

The rendering of standard "way" is better than font added with font-face (files on mh host). I tried only with firefox. How is possible?

I prefered @font-face because think that is better for perfomance, but it is not a good idea if the rendering will be ugly...

I hope you can help me. Sorry for my english and thanks a lot! :)

Answer 1

It is possible. Render can be different depending on the font format. Using this:

<link href='https://fonts.googleapis.com/css?family=ABeeZee' rel='stylesheet' type='text/css'>

Gives (more or less, it changes depending on the browser) this stylesheet:

@font-face {
  font-family: 'ABeeZee';
  font-style: normal;
  font-weight: 400;
  src: local('ABeeZee'), local('ABeeZee-Regular'), url(https://fonts.gstatic.com/s/abeezee/v9/TV7JXr7j4tW7mgYreANhGQ.woff2) format('woff2');
}

On the other hand the stylesheet from localfont is:

@font-face {
  font-family: 'ABeeZee';
  font-weight: 400;
  font-style: normal;
  src: url('/fonts/ABeeZee-regular/ABeeZee-regular.eot');
  src: url('/fonts/ABeeZee-regular/ABeeZee-regular.eot?#iefix') format('embedded-opentype'),
       local('ABeeZee'),
       local('ABeeZee-regular'),
       url('/fonts/ABeeZee-regular/ABeeZee-regular.woff2') format('woff2'),
       url('/fonts/ABeeZee-regular/ABeeZee-regular.woff') format('woff'),
       url('/fonts/ABeeZee-regular/ABeeZee-regular.ttf') format('truetype'),
       url('/fonts/ABeeZee-regular/ABeeZee-regular.svg#ABeeZee') format('svg');
}

This second css have the font in many formats and the browser will use the first one it can understand, wich could be not the same one used in the other css.

On the other hand the font file itself can be different, ABeeZee downloaded from localfont (right now) sizes 13KB, but from Google it is 17KB. Since they are not the same file you can expect different results.