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

Question

I don’t know how this is possible ... There is another rendering if I use google fonts with @font-face (Created from localfont.com ) or if I use the standard link stylesheet (download from google server).

Rendering a standard "path" is better than a font added using font-face (files on the mh host). I tried only with firefox. As possible?

I preferred @ font-face because I think it’s better for execution, but it’s not a good idea if the rendering is ugly ...

I hope you help me. Sorry for my english and thank you very much! :)

Answer 1

It is possible. Rendering may vary 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, varies 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:

 @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 has a font in many formats, and the browser will use the first, which it can understand, which may not be the one used in another css.

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

Answer 2

You may need to customize the way the font is rendered using the text-rendering css property. This can greatly affect the appearance of the font.

Quote from article article in css tricks:

auto (default) . The browser gives reasonable assumptions about when to optimize speed, clarity and geometric accuracy when drawing text. Keep in mind that different browsers interpret this value differently.

 p { text-rendering: auto; } 

optimizeSpeed. The browser emphasizes rendering speed for readability and geometric accuracy when drawing text. This disables kerning and ligatures.

 p { text-rendering: optimizeSpeed; } 

optimizeLegibility . The browser emphasizes clarity in rendering speed and geometric accuracy. This allows you to use special kerning and additional information about the ligature, which may be contained in the font file for certain fonts.

 p { text-rendering: optimizeLegibility; } 

geometricPrecision . The browser emphasizes geometric accuracy in speed and readability. Some aspects of fonts, such as kerning, do not scale linearly, so geometricPrecision can make text using these fonts good. When the SVG font is scaled, the browser calculates the pixel size and then rounds it to the nearest integer. The geometricPrecision property allows you to zoom in fluid. Note. Only these browsers use only the current values, Gecko processes the value in the same way as optimizeLegibility.

 p { text-rendering: geometricPrecision; } 

Hope this helps.