CODEWITHSUNDEEP
cssfirefoxfontsfont-facechromium
User2121315
User2121315

Reputation: 283

@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!

Upvotes: 8

Views: 2340

Answers (5)

bryanc75
bryanc75

Reputation: 21

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;

Upvotes: 1

Xarcell
Xarcell

Reputation: 2011

Instead of adding all that CSS code, and all those files needed to make it work across multiple browsers, just try Google WebFonts. http://www.google.com/webfonts

Upvotes: -1

mike
mike

Reputation: 101

I'm adding this as an answer, as I don't have enough points to comment. But it's a question: Do you have Terminus installed locally? If so, try uninstalling it and see what you get.

Apologies for commenting as an answer...

Upvotes: 0

Sandeep Pattanaik
Sandeep Pattanaik

Reputation: 632

Actually TTF only accepts mozila, there are many font types are there, like TTF, SVG, WOFF, eot. you have to use all font files. Here is a awesome tool for generating fontface.

http://www.fontsquirrel.com/tools/webfont-generator

Here is a example:

@font-face {
    font-family: 'YourFontName';
    src: url('gershwinscript.eot');
    src: url('gershwinscript.eot?#iefix') format('embedded-opentype'),
         url('gershwinscript.woff') format('woff'),
         url('gershwinscript.ttf') format('truetype'),
         url('gershwinscript.svg#gershwin_scriptregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

I think, this will help you.

Upvotes: 0

Dnaso
Dnaso

Reputation: 1365

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.

Upvotes: 1

Related Questions