Variable font combine two files

1

Hi there,

I have two files of a typeface, one with all roman and one with all italic masters. Before exporting the var files, I renamed them via custom parameter to get two individual var files. One for romans, one for italics (because otherwise the files would overwrite themselves). But now Adobe Apps show them as two separate families, of course.
Is it possible to combine the two files/families into one so that Adobe Apps show them as one family with all predefined instances (romans and italics), instead of two separate families (one for all romans and one for all italics).
I’ve seen this working on Monotype’s Macklin variable fonts (two files, one roman, one italic and one variable family in the Adobe font menu).

Thanks a lot!

2

You do not need a single file. Can be two separate files. Variable Family Name must be the same.

3

Thanks for your reply. Now I found the problem!
I had spaces in a custom parameter. This is how it works:
Variable Font File Name: FontnameVariable-Roman or FontnameVariable-Italic
Variable Font Family Name: Fontname Variable

4

Sorry to bother again, but it still doesn’t work like it should.
When I use the following custom parameters
Variable Font File Name: FontnameVariable-Roman or FontnameVariable-Italic
Variable Font Family Name: Fontname Variable (same in both files)
I get two individual files (good). But when I open Illustrator I can see the predefined instances from only one var file (i.e. the roman styles).

Now it gets weird:

When I enter two slightly different Variable Font Family Names (one with space between “Fontname” and “Variable” and one without) I can see all predefined instanced in Illustrator. But the Family name in the font menu list now has no space between “Fontname” and “Variable”.
Plus, InDesign only shows the predefined instances from one var file only… no matter how the naming is.

I’m using the Adobe fonts folder to test, I updated to the last version of Glyphs and Illustrator/InDesign.
What am I doing wrong here?

5

Can you please send me the .glyphs file to support (at) (this website without www). I will have a look.

6

Please update this topic with potential solutions, I’m aiming to do the same.

7

I added two custom parameters to Font Info > Font in each file:

  1. Name Table Entry: 25; FamilyNameRoman in the upright, and 25; FamilyNameItalic in the italic file
  2. variableStyleName: Roman in the upright, and Italic in the italic file

Name Table ID 25 is the Variations PostScript Name Prefix, which needs to be present for working in Adobe apps:

If present in a variable font, it may be used as the family prefix in the PostScript Name Generation for Variation Fonts algorithm. The character set is restricted to ASCII-range uppercase Latin letters, lowercase Latin letters, and digits. All name strings for name ID 25 within a font, when converted to ASCII, must be identical. See Adobe Technical Note #5902: “PostScript Name Generation for Variation Fonts” for reasons to include name ID 25 in a font, and for examples. For general information on OpenType Font Variations, see the chapter, OpenType Font Variations Overview.

The variableStyleName is probably not necessary in your case, since you have an instance defined exactly at the variable font origin.

3 Likes
8

Great, thanks for the help!!
Works now perfectly.

9

Quick question about this. On the web, having a single file for Roman and Italic helps avoid at least one server request - very important for a project I’m currently working on.

Is it possible to end up with just one variable font file, even from two different glyphs files?

10

That depends on the design of you font.

If number of requests is important to you, you can base64 encode your fonts and put them all into your CSS code, requiring no additional request for any font.

11

That will depend on How many bytes a base 64 conversion adds to a css and if the tradeoff is good, it will make sense. I don’t know much about this, but I’ll look into it. Thanks for pointing me to this direction, Florian.

12

I would generally advise against base64 fonts in CSS and instead load the fonts individually. If you can identify the number of requests to be your bottleneck (and not the file transfer speed), then it is still worth looking into.

If your fonts have similar designs then variable fonts can reduce your overall transfer size dramatically, especially if you combine many fonts into one. If instead the design from one fonts needs a lot of adjustments to match the design of the other then variable fonts can not share a lot of the the glyph-drawing code and only share things like the character mapping or the OpenType layout feature code.

Beyond that, there is font subsetting and a lot of other web-font-loading strategies. It is a bit of a dark art. A great entry point is Zach Leatherman’s An Unhealthy Obsession With Web Fonts & Type.

13

For all glyphs that are not compatible, you need to add feature variations to switch glyph altogether instead of interpolating. That adds A LOT overhead as you have many more glyphs in your font.

You might be able to use a .ttc (TrueType collection) but I’m not sure how well variable fonts in .ttc are supported.

1 Like