Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

@font-face blurry/bolded/distorted glyphs for remote fonts

I'm attempting to switch to @font-face instead of relying on users to have the font installed (to be precise it is the Terminus font, rather its TTF version).

Unfortunately, I've ran into some bizarre "bolding" or "distortion" of the fonts when dealing with remotely-hosted files as shown on this image:

enter image description here

As you can see, for some reason remotely-fetched fonts are distorted in sizes 12, 14, 16, 18, 20, 24 whist local fonts have some kind of "normalization" applied on them for those parts making them look pretty and in-place.

Another thing to mention is that I've attempted to use FontSquirrel's WebFont Generator which demo-htmls the screenshot is displaying along these CSS codes respectively:

@font-face {
   font-family: 'terminus_ttfmedium';
   src: url('terminusmedium-4.38-webfont.ttf') format('truetype');
}

and

@font-face {
   font-family: 'terminus_ttfmedium';
   src: local('Terminus (TTF)');
}

Terminus (TTF) is the same pack of files, just installed to /usr/share/fonts/.

Any insight would be greatly appreciated!

EDIT: Changing FontSquirrel advanced options seems not to help this issue at all.

EDIT2: Neither do all the method's I've attempted work on Firefox. Additionally, I've copied a font into a working directory (the same one used locally), linked it through the "url" field and it still maintains distortions. This is futile!

like image 822
User2121315 Avatar asked Mar 06 '13 20:03

User2121315


2 Answers

I've found that including the following on the elements rendering blurry has helped.

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased;
like image 36
bryanc75 Avatar answered Oct 02 '22 19:10

bryanc75


font-squirrel used to have a section with multiple outputs. TTF doesn't work in all versions of browers

     src: url('Bevan-webfont.eot?#iefix') format('embedded-opentype'),
     url('Bevan-webfont.woff') format('woff'),
     url('Bevan-webfont.ttf') format('truetype'),
     url('Bevan-webfont.svg#BevanRegular') format('svg');

they use to have font packs with all these extensions, cant seem to find it on the site anymore.

like image 67
Dnaso Avatar answered Oct 02 '22 18:10

Dnaso