Webfont export best practice

Glyphs
1

I looked at the handbook, but am not very familiar with web fonts. I’d like to export my fonts as web fonts to sell.

I see all the settings in the Export tabs, but am wondering which are the best settings—or at least most common file format—for a hand drawn font for users: OpenType or TrueType flavored? WOFF or WOFF2, etc.? (Should I take Autohint off?)

And, is that really all I need to do to make a webfont version available for sale—just export one of these file formats as I do my usual OpenType files?

Thanks!

2

Hi Adam, I’d suggest going with the OpenType flavour. It gives you many more options, such as swashes, stylistic sets etc. I’d also provide both WOFF and WOFF2. WOFF2 gives better compression, but WOFF has wider support. You can easily reference both in CSS.

I’ll let someone with more experience answer your question on hinting.

1 Like
3

TrueType and OpenType have exactly the same features support. The naming is a bit missleading. It should always be ‘OpenType with cff outlines’ and ‘OpenType with TrueType outlines’.

There are some subtle differences but it is mostly about screen rendering on Windows machines. On Windows, you can get better results (with proper hinting/instructions) for small sizes.

4

I was under the impression that Opentype offered support for more characters, swashes, alternates and stylistic sets than TrueType. Is that incorrect?

5

As I said. When you now say TrueType, you mean OpenType with TrueType outlines. And simply said, OpenType/CFF is ‘TrueType with PostScript outlines’.

1 Like
6

Ah, I understand you now. Thanks for clearing that up.

7

There are some subtle differences but it is mostly about screen rendering on Windows machines. On Windows, you can get better results (with proper hinting/instructions) for small sizes.

Actually I noticed a lot of difference on Adobe Indesign too (on Mac), even with only the Autohinting.
I don’t think that make a difference in printing, but while you are working, and exporting jpegs or png, the .ttf flavored otf got better results

1 Like
8

Thank you all for this feedback and info. Really appreciate it.

9

I meant differences in the file format other than the outline format.

10

Sorry to ask for clarification on this, again.

Which is better to use, “OpenType with CFF/PostScript outlines” or “OpenType with TrueType outlines”?

11

Depends. TT performs better on Windows machines and is generally more stable. In some circumstances, PS can give you better compression. And PS support is pretty good now too, so I would try both, do a lot of browser testing on different platforms, and then decide.

2 Likes
12

The question is mostly relevant for Windows users, and to some smaller extend for Android. Mac and iOS render CFF and TTF mostly the same.

If you have irregular shapes, the CFF usually is better because it is rendered a bit smother on most systems (where it makes a difference in the first place). With TrueType you have more control over the rendering but you need to take control and add Truetype hinting, either manually or autohinting.

2 Likes
13

Thank you, @mekkablue and @GeorgSeifert … in my case, it’s a pixel grid-based font, so I think smoothness and rendering of round curves is not used at all … I suppose.

I think, in regards of what both of you wrote, I’d just go with TrueType flavoured WOFF and WOFF2 with Autohint.

14

For Pixel fonts, hinting usually is making a mess. So you need to test a lot and see what looks better.

15

TrueType exports components, CFF fonts do not. In the case of a pixel font I therefoe recommend a TT font, because you can use the pixel as a component throughout the whole typeface

16

I created the pixel typeface as explained in the Glyphs tutorial. So it uses one pixel as component to build every other glyph. The pixel is marked as do-not-export, though.

Also I built other components like diacritical marks and such.

Not sure how the @mekkablue’s answer is meant, as I think everything gets exported correctly in either format.

Seems that question was more complex than I initially thought.

17

For TT, turn its export on.

18

Alright, so … activate export of “pixel” component and … deactivate/un-check autohint.

Thank you!

19

I would not theorise to much about it. Export both and test as much as you can on as many devices/systems you can get your hands on.

1 Like