Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
gwern opened this issue Mar 3, 2019 · 5 comments

Comments

@gwern
Copy link

commented Mar 3, 2019

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

This comment has been minimized.

Copy link
Member

commented Mar 3, 2019

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

This comment has been minimized.

Copy link
Author

commented Mar 3, 2019

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

This comment has been minimized.

Copy link
Member

commented Mar 7, 2019

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

This comment has been minimized.

Copy link

commented Mar 7, 2019

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

This comment has been minimized.

Copy link
Member

commented Mar 8, 2019

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.