@ font-face blurry / bold / distorted glyphs for deleted fonts

Question

I'm trying to switch to @font-face instead of relying on users to install the font (more precisely, this is Terminus , but rather its TTF version.)

Unfortunately, I came across some bizarre “bold” or “distorted” fonts when working with remotely hosted files, as shown in this image:

As you can see, for some reason, the deleted fonts are distorted in sizes 12, 14, 16, 18, 20, 24, the local fonts have some kind of "normalization" applied to them for those parts that make them look pretty and in place.

One more note: I tried using the FontSquirrel WebFont Generator , which shows a screenshot of 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 package of files just installed on /usr/share/fonts/ .

Any understanding would be greatly appreciated!

EDIT : changing the additional parameters of FontSquirrel does not seem to help this problem at all.

EDIT2 . None of the methods that I tried to use in Firefox worked. In addition, I copied the font to the working directory (the same one that was used locally), linked it through the "url" field and still retains distortion. It's useless!

Answer 1

font-squirrel had a section with several exits. TTF does not work in all browser versions

  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 packages with all of these extensions, they may no longer find it on the site.

Answer 2

I found that incorporating blurry in the render elements helped do the following.

 -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-smoothing: antialiased; 

Answer 3

Perhaps you can try to smooth out font smoothing rendering:

 body { -webkit-font-smoothing: antialiased; font-smoothing: antialiased; } 

Answer 4

In fact, TTF only accepts mozila, there are many types of fonts, such as TTF, SVG, WOFF, eot. You must use all font files. Here is a great font creation tool.

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

Here is an 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.

Answer 5

I am adding this as an answer since I do not have enough comments for comments. But this is the question: Do you have a terminal installed locally? If so, try deleting it and see what you get.

Apologies for the comment as an answer ...

Answer 6

Instead of adding all this CSS code and all of these files that are needed to work in multiple browsers, just try Google WebFonts. http://www.google.com/webfonts