Checking .woff and .eof-fonts

morten's picture

Hello,
For my very first time, I have created a webfont in two formats via FontSquirrel (hurraa!), but how do I check them? When I open the .ttf web-version in e.g. InDesign, everything is OK, but how do I install .woff/.eof, so I can watch it/write with it in my browser (Safari)?
I have no web-applications at all, and no experiance with webdesign.

ralf h.'s picture

It's the whole point of WOFF/EOT that they can't be installed in a regular operating system. You just link them in your HTML/CSS files and the browser will use them. So to test it, you need to prepare a HTML page. The FontSquirrel Generator download package should have such test documents already in it.

morten's picture

Thanks Ralf. My problem is, that a customer seems to have a few problems with some kerning/spacing-issue in a font I have convertet. And I can't see this in the test-docu from FontSquirrel! But mayby I have made some bad 'choices' in FontSquirrel? Here's my settings:

ralf h.'s picture

Looks fine. None of these choices should affect the original spacing/kerning of the font.

David Vereschagin's picture

Web browsers normally won’t use the kerning information in fonts. This might be the source of the spacing issue. To force modern browsers to use pair kerning, add the following line to your CSS text declarations that are using the custom font:

text-rendering: optimizeLegibility;

PabloImpallari's picture

Instead of:
text-rendering: optimizeLegibility;

I will recommend:
font-feature-settings: "kern" on, "liga" on
-moz-font-feature-settings: "kern" on, "liga" on
-webkit-font-feature-settings: "kern" on, "liga" on
-ms-font-feature-settings: "kern" on, "liga" on
-o-font-feature-settings: "kern" on, "liga" on

In the future, hopefully, only:
font-feature-settings: "kern" on, "liga" on

jasonc's picture

Yeah, text-rendering: optimizeLegibility is a tricky one. I still recommend it's use, but it's not because it's ideal, and I look forward to when I won't need to anymore. It was always a kludge. You can get some more info here:
http://www.typotheque.com/articles/opentype_features_in_web_browsers

You've really just got to keep an eye on the browser updates at this point, unfortunately.

Thomas Phinney's picture

> Instead of:
> text-rendering: optimizeLegibility;
> I will recommend:

I strongly recommend combining BOTH approaches rather than taking either by itself—unless you prefer one version or another with some kind of ideological passion that takes precedence over, say, actually wanting the kerning to work for as many users as possible.

Cheers,

T

Té Rowan's picture

Besides, web browsers based on Firefox 3.x will not understand any font-feature-settings, if I remember correctly.

Thomas Phinney's picture

That's a good article. A bit behind on some details, though. Notably Firefox switched suddenly to using the "new" syntax recently. So you need two lines for Firefox, one "old" and one "new" if you want to catch all browsers....

Turning on the common features that ought to be on by default currently looks like this:
-moz-font-feature-settings:"calt=1, liga=1, clig=1, kern=1";
-moz-font-feature-settings:"calt" 1, "liga" 1, "clig" 1, "kern" 1;
-ms-font-feature-settings:"calt", "liga", "clig", "kern";
-o-font-feature-settings:"calt", "liga", "clig", "kern";
-webkit-font-feature-settings:"calt", "liga", "clig", "kern";
font-feature-settings:"calt", "liga", "clig", "kern";
text-rendering:optimizeLegibility;

Frode Bo Helland's picture

All of that stuff breaks Postscript based WOFF’s on Windows Vista/Google Chrome. Just so you know.

ralf h.'s picture

You mean they won't show up?

Thomas Phinney's picture

Yes, I'm curious as to the meaning of "breaks" in this context.

twardoch's picture

This is a bit of an advertising cross-post, yet hopefully interesting:

I'm excited to let you know that we at Fontlab Ltd. have just released the 2nd beta of TransType 4 for Mac OS X. With this build, you can convert any font (OTF, TTF, plus a number of other formats) into WOFF and EOT webfonts.

TransType 4 beta 2 is available free of charge at http://bit.ly/trt4macbeta2

The current build 4762 will expire on February 28th, 2013. However, by the time that build expires, we will post another build with more features and bugfixes.

Enjoy!

Best regards,
Adam Twardoch
Fontlab Ltd.

Syndicate content Syndicate content