font-face alternatives

Question

My client (who is obsessed with pixel perfection) dislikes the way browsers render font-face fonts.

At the moment I am using font-squirrel to convert OTF fonts to webfonts.

The problem is, I don't see any alternatives. I could create a PNG file holding all these texts, but that doesn't sound like a browser-user-friendly solution.

The typical example of a design I have to work on is:

What would be your approach?

I'm assuming that by "dislikes the way browsers render @font-face" your'e referring to the blink which happens. If not, you should elaborate.

The top one is web-font and the bottom one is screengrab from PSD. Both using same font family, same spacing. The client wants to look it more like the bottom one.

Answer 1

I'm assuming that by "dislikes the way browsers render @font-face" your'e referring to the blink which happens. If not, you should elaborate.

Currently there's only 3 options to remove that blink. The first two are obvious solutions - use images, or use web safe fonts. These, obviously, defeat the purpose.

The third option is to embed base64 code for the fonts in your CSS. This increases the size (kb) of your CSS files, but it will completely eliminate the blink which tends to occur because the font is loaded with the CSS so there's no blink when a secondary file is loaded.

usage for including bas64 fonts looks like this:

 @font-face {
 font-family: "FontName";
 src: url("data:font/opentype;base64,[   the base64 code here   ]");
 }

There are a few online bas64 converters that you can feed a .otf file to and they'll spit out the base64 code. Here's one such converter.