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.

Answer 2

You may need to adjust the way the font is rendered using the text-rendering css property. It can have a big impact on how the font actually looks.

Quoted from this article on css-tricks:

auto (default) - The browser makes educated guesses about when to optimize for speed, legibility, and geometric precision while drawing text. Be aware that different browsers interpret this value differently.

p {
  text-rendering: auto;
}

optimizeSpeed - The browser emphasizes rendering speed over legibility and geometric precision when drawing text. It disables kerning and ligatures.

p {
  text-rendering: optimizeSpeed;
}

optimizeLegibility - The browser emphasizes legibility over rendering speed and geometric precision. This enables the use of special kerning and optional ligature information that may be contained in the font file for certain fonts.

p {
  text-rendering: optimizeLegibility;
}

geometricPrecision - The browser emphasizes geometric precision over rendering speed and legibility. Certain aspects of fonts—such as kerning—don't scale linearly, so geometricPrecision can make text using those fonts look good. When SVG font is scaled, the browser calculates pixel size, then rounds to the nearest integer. The geometricPrecision property allows for more fluid scaling. Note: Only WebKit browsers apply this fluid value, Gecko treats the value just like optimizeLegibility.

p {
  text-rendering: geometricPrecision;
}

Hopefully that helps.