Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Text Smoothing Re: Text Smoothing

#64106
Gupocca
Member

As said above, the smoothness of a font mostly depends on a user’s browser and OS. However, I think I’ve found a way to increase the chances for a smooth rendering using @font-face.

I “discovered” this purely out of experimentation, but I ultimately found something that seemed to work — at least, with the font I was using.

First, save your font file to the various formats supported by @font-face. I just used Font Squirrel’s nifty generator. If you use that, it will export a stylesheet and the converted files.

Next, rearrange the @font-face property so it looks something like this:

@font-face {
font-family: 'MyFont';
src: url('MyFont.eot');
src: url('MyFont.otf') format('opentype'), local('☺'), url('MyFont.woff') format('woff'), url('MyFont.ttf') format('truetype'), url('MyFont.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;
}

With any luck, your font will now render more smoothly. There are other ways to accomplish this smoothness (such as Cufón), but this worked for me.