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

Question

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!

[Tried to reproduce without success.](http://jsfiddle.net/ASt75/) I also tried on a local Apache server. Are you seeing the same effect in the Fiddle, or might you know why this wouldn't reproduce what you're seeing? [Here's how the Fiddle displays for me.](http://www.jmeas.com/files/screencaps/output.jpg) — jamesplease, Mar 09 '13 at 15:19
@jmeas: Hmm, here's [how it looks for me](http://i.imgur.com/VK17cz3.png). I'm not sure what's making my local fonts appear much smoother than remote ones though :/ — User2121315, Mar 09 '13 at 16:52
It's known that OS' display fonts differently, so while it's a strange case (in that it's the same font fetched from different sources) it might be that your Arch Linux is weirding out here. But I don't know for sure! — jamesplease, Mar 10 '13 at 17:27
Is'nt it a hinting problem like stated here :http://stackoverflow.com/questions/9369723/font-face-on-chrome-16-in-windows-7-looks-like-something-ate-parts-of-it — user18428, Mar 15 '13 at 11:24
Do you have `font-weight: normal` explicitly in your CSS? I've run into issues where browsers try to guess weight, in turn making fonts distorted and blurry. I'm assuming this isn't the case here, but thought I'd throw it out there anyways. — gmartellino, Mar 15 '13 at 14:51
Are you sure is not a font problem from your server ? http://bugs.pwmt.org/issue151 | https://bugs.kde.org/show_bug.cgi?id=218230#c10 — rbinsztock, Mar 15 '13 at 21:17
@gmartellino: Absolutely, it's the default setting when FontSquirrel generates the CSS. — User2121315, Apr 01 '13 at 08:04
@senayar: Positive, because I am not using a server for my local tests. — User2121315, Apr 01 '13 at 08:05

score 1 · Answer 1 · answered Mar 13 '13 at 20:33

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.

score 1 · Answer 2 · answered Nov 08 '13 at 17:28

1

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;

answered Nov 08 '13 at 17:28

bryanc75

21
2

score 0 · Answer 3 · answered Mar 15 '13 at 14:15

0

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.

answered Mar 15 '13 at 14:15

Sandeep Pattanaik

622
4
20

TTF only accepts mozila? You're sure of that?Cause my ttf get read ok by ie while mozilla favors woff (and opera svg) – user18428 Mar 15 '13 at 14:44
I agree with this answer, you need all file types of hosted locally to work cross-browser, so keep that in mind. This doesn't answer your question, but very useful information indeed. – Xarcell Mar 15 '13 at 17:01
Thanx @Xarcell for agree with my answer. – Sandeep Pattanaik Mar 18 '13 at 14:18
@user1654209 Use all font files frnd. – Sandeep Pattanaik Mar 18 '13 at 14:21
@SandeepPattanaik I commented about your statement that "Actually TTF only accepts mozila".This is is false. For the rest, using a multi file type declaration is a well known good practice – user18428 Mar 18 '13 at 14:39
@user1654209 so keep going my frnd. – Sandeep Pattanaik Mar 18 '13 at 14:42
I don't even... I mentioned using FontSquirrel, basically re-using its generated CSS code to actually generate these demonstrational pictures, and to ensue my compliance with standards. Needless to say, I have attempted all font types. – User2121315 Apr 01 '13 at 08:08

score 0 · Answer 4 · answered Mar 15 '13 at 15:29

0

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...

answered Mar 15 '13 at 15:29

mike

101
1
6

score -1 · Answer 5 · answered Mar 15 '13 at 17:02

-1

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

answered Mar 15 '13 at 17:02

Xarcell

2,011
6
33
65

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

5 Answers5