Additions: smaller TTF version, and individual-letter/subset font version

[gwern]

While adding drop caps to my website recently (demo), I came across yinit and we really wanted to use it. However, the TTF/OTF file is quite large, and it would be too expensive to have it downloaded on every page for a single drop caps.

So Obormot converted the OTF to a TTF version (uncompressed: 699KB->168KB) which is much smaller.

Then he subsetted the font in FontForge, creating a package of individual font files, which permits loading only the letter used on each page with the following example CSS (update paths as relevant):

@font-face {
    font-family: 'Yinit';
    src: url('/static/font/Yinit-A.ttf') format('truetype');
    unicode-range: U+0041;
}
@font-face {
    font-family: 'Yinit';
    src: url('/static/font/Yinit-B.ttf') format('truetype');
    unicode-range: U+0042;
}
@font-face {
    font-family: 'Yinit';
    src: url('/static/font/Yinit-C.ttf') format('truetype');
    unicode-range: U+0043;
}
@font-face {
    font-family: 'Yinit';
    src: url('/static/font/Yinit-D.ttf') format('truetype');
    unicode-range: U+0044;
}
@font-face {
    font-family: 'Yinit';
    src: url('/static/font/Yinit-E.ttf') format('truetype');
    unicode-range: U+0045;
}
@font-face {
    font-family: 'Yinit';
    src: url('/static/font/Yinit-F.ttf') format('truetype');
    unicode-range: U+0046;
}
@font-face {
    font-family: 'Yinit';
    src: url('/static/font/Yinit-G.ttf') format('truetype');
    unicode-range: U+0047;
}
@font-face {
    font-family: 'Yinit';
    src: url('/static/font/Yinit-H.ttf') format('truetype');
    unicode-range: U+0048;
}
@font-face {
    font-family: 'Yinit';
    src: url('/static/font/Yinit-I.ttf') format('truetype');
    unicode-range: U+0049;
}
@font-face {
    font-family: 'Yinit';
    src: url('/static/font/Yinit-J.ttf') format('truetype');
    unicode-range: U+004A;
}
@font-face {
    font-family: 'Yinit';
    src: url('/static/font/Yinit-K.ttf') format('truetype');
    unicode-range: U+004B;
}
@font-face {
    font-family: 'Yinit';
    src: url('/static/font/Yinit-L.ttf') format('truetype');
    unicode-range: U+004C;
}
@font-face {
    font-family: 'Yinit';
    src: url('/static/font/Yinit-M.ttf') format('truetype');
    unicode-range: U+004D;
}
@font-face {
    font-family: 'Yinit';
    src: url('/static/font/Yinit-N.ttf') format('truetype');
    unicode-range: U+004E;
}
@font-face {
    font-family: 'Yinit';
    src: url('/static/font/Yinit-O.ttf') format('truetype');
    unicode-range: U+004F;
}
@font-face {
    font-family: 'Yinit';
    src: url('/static/font/Yinit-P.ttf') format('truetype');
    unicode-range: U+0050;
}
@font-face {
    font-family: 'Yinit';
    src: url('/static/font/Yinit-Q.ttf') format('truetype');
    unicode-range: U+0051;
}
@font-face {
    font-family: 'Yinit';
    src: url('/static/font/Yinit-R.ttf') format('truetype');
    unicode-range: U+0052;
}
@font-face {
    font-family: 'Yinit';
    src: url('/static/font/Yinit-S.ttf') format('truetype');
    unicode-range: U+0053;
}
@font-face {
    font-family: 'Yinit';
    src: url('/static/font/Yinit-T.ttf') format('truetype');
    unicode-range: U+0054;
}
@font-face {
    font-family: 'Yinit';
    src: url('/static/font/Yinit-U.ttf') format('truetype');
    unicode-range: U+0055;
}
@font-face {
    font-family: 'Yinit';
    src: url('/static/font/Yinit-V.ttf') format('truetype');
    unicode-range: U+0056;
}
@font-face {
    font-family: 'Yinit';
    src: url('/static/font/Yinit-W.ttf') format('truetype');
    unicode-range: U+0057;
}
@font-face {
    font-family: 'Yinit';
    src: url('/static/font/Yinit-X.ttf') format('truetype');
    unicode-range: U+0058;
}
@font-face {
    font-family: 'Yinit';
    src: url('/static/font/Yinit-Y.ttf') format('truetype');
    unicode-range: U+0059;
}
@font-face {
    font-family: 'Yinit';
    src: url('/static/font/Yinit-Z.ttf') format('truetype');
    unicode-range: U+005A;
}

This means only 4-7kb (uncompressed) has to be downloaded for each page which is much more doable and represents a bandwidth reduction of ~100x for pages using 1 initial.

I don't know how font packaging or CTAN works, but it would be nice if these could be provided somehow so other people than me could benefit from the yinit initials. (As I said, I really like them and think it's a pity that they're hardly used, it looks like.)

[norbusan]

Hi @gwern
thanks a lot for your work, that looks very interesting. I guess the TTF font is available under the same license as the OTF and the yinit metafont itself?

I can imagine that we create a "package" yinit-ttf which contains the ttf and split fonts, and some description concerning how to use it.. Either you or me do an upload to CTAN.

If you want, I create a project here on github yinit-ttf and give you full access to it. Would this fit your needs?

[gwern]

Yes, consider it under whatever license is necessary.

I couldn't say what the best way would be. I don't use TeX, much less have any experience with uploading or maintaining font packages. I figured the simplest way would be to simply add those files to the yinit package (which is small) and the CSS or a description thereof to the README. But if you think another package is the right thing to do, go ahead.

[norbusan]

Hi @gwern
thanks for your agreement. Thinking about it, it might be a good idea to merge yinit and yinit-otf and the ttf fonts, but before doing that, I have one question concerning license, which is essential.

You said your changes are fine with whatever license. What is with the Obormot created ttf file. Do you have any pointer? Can I include it under the same license as the original fonts? If yes, I would create a new yinit containing the otf, ttf, and split ttf fonts and your description concerning html setup.

[achmizs]

Hi, I am the one who created the TTF files (the big one, the split ones, the .css with the @font-face—everything). (I’m Said Achmiz / Obormot.)

You’re welcome to include all of the above under the same license as the original fonts, or any other license you feel is appropriate.

[norbusan]

@achmizs thanks a lot for the contact, that is very much appreciated.
@gwern and @achmizs I have now pushed a new branch split-ttf with README changes, an added yinit.css etc. I need to polish this a bit more, consult with some people about the yinit and yinit-otf merge, but this is what I plan to upload sooner or later. Please let me know your comments.