Fixed metadata that enables fonts to be recognised as a family

I've found out that a few fields that might be passed to opentype.js were not being used while producing the font. I have been able to pinpoint those fields and where they should be applied to produce fonts that are recognised as a family. Tested only with a couple of fonts but changes were regonised by Windows and other apps. An issue regarding the fields hhea.caretSlopeRise and hhea.caretSlopeRun for italic and oblique fonts is still pending review but does not prevent font usage or recognition as a family (caret slope had a weird inclination while testing on Word but not on Affinity Designer). These same changes were applied to the copy of the library used by Glyphr Studio (v2) where the tests were conducted.
opentypejs · Jul 21, 2023 · 0428d1d · 0428d1d
1 parent d9e369e
commit 0428d1d
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 7 deletions.
diff --git a/src/font.js b/src/font.js
@@ -86,12 +86,38 @@ function Font(options) {
         this.unitsPerEm = options.unitsPerEm || 1000;
         this.ascender = options.ascender;
         this.descender = options.descender;
+        this.slope = options.slope;
+        this.italicAngle = options.italicAngle;
         this.createdTimestamp = options.createdTimestamp;
+
+        var selection = 0;
+        if (this.italicAngle < 0) {
+            selection |= this.fsSelectionValues.ITALIC;
+        } else if (this.italicAngle > 0) {
+            selection |= this.fsSelectionValues.OBLIQUE;
+        }
+        if (this.weightClass >= 600) {
+            selection |= this.fsSelectionValues.BOLD;
+        }
+        if (selection == 0) {
+            selection = this.fsSelectionValues.REGULAR;
+        }
+
         this.tables = Object.assign(options.tables, {
             os2: Object.assign({
                 usWeightClass: options.weightClass || this.usWeightClasses.MEDIUM,
                 usWidthClass: options.widthClass || this.usWidthClasses.MEDIUM,
-                fsSelection: options.fsSelection || this.fsSelectionValues.REGULAR,
+                bFamilyType: options.panose[0] || 0,
+                bSerifStyle: options.panose[1] || 0,
+                bWeight: options.panose[2] || 0,
+                bProportion: options.panose[3] || 0,
+                bContrast: options.panose[4] || 0,
+                bStrokeVariation: options.panose[5] || 0,
+                bArmStyle: options.panose[6] || 0,
+                bLetterform: options.panose[7] || 0,
+                bMidline: options.panose[8] || 0,
+                bXHeight: options.panose[9] || 0,
+                fsSelection: selection,
             }, options.tables.os2)
         });
     }

diff --git a/src/tables/head.js b/src/tables/head.js
@@ -52,7 +52,7 @@ function makeHeadTable(options) {
         {name: 'yMin', type: 'SHORT', value: 0},
         {name: 'xMax', type: 'SHORT', value: 0},
         {name: 'yMax', type: 'SHORT', value: 0},
-        {name: 'macStyle', type: 'USHORT', value: 0},
+        {name: 'macStyle', type: 'USHORT', value: options.macStyle},
         {name: 'lowestRecPPEM', type: 'USHORT', value: 0},
         {name: 'fontDirectionHint', type: 'SHORT', value: 2},
         {name: 'indexToLocFormat', type: 'SHORT', value: 0},

diff --git a/src/tables/post.js b/src/tables/post.js
@@ -50,17 +50,17 @@ function parsePostTable(data, start) {
     return post;
 }
 
-function makePostTable(postTable) {
+function makePostTable(font) {
     const {
-        italicAngle = 0,
+        italicAngle = Math.round((font.italicAngle || 0) * 0x10000),
         underlinePosition = 0,
         underlineThickness = 0,
         isFixedPitch = 0,
         minMemType42 = 0,
         maxMemType42 = 0,
         minMemType1 = 0,
         maxMemType1 = 0
-    } = postTable || {};
+    } = font.tables.post || {};
     return new table.Table('post', [
         { name: 'version', type: 'FIXED', value: 0x00030000 },
         { name: 'italicAngle', type: 'FIXED', value: italicAngle },

diff --git a/src/tables/sfnt.js b/src/tables/sfnt.js
@@ -206,6 +206,13 @@ function fontToSfntTable(font) {
     globals.ascender = font.ascender;
     globals.descender = font.descender;
 
+    var macStyle = 0;
+    if (font.italicAngle < 0) {
+        macStyle |= 2;
+    }
+    if (font.weightClass >= 600) {
+        macStyle |= 1;
+    }
     const headTable = head.make({
         flags: 3, // 00000011 (baseline for font at y=0; left sidebearing point at x=0)
         unitsPerEm: font.unitsPerEm,
@@ -214,6 +221,7 @@ function fontToSfntTable(font) {
         xMax: globals.xMax,
         yMax: globals.yMax,
         lowestRecPPEM: 3,
+        macStyle: macStyle,
         createdTimestamp: font.createdTimestamp
     });
 
@@ -224,7 +232,8 @@ function fontToSfntTable(font) {
         minLeftSideBearing: globals.minLeftSideBearing,
         minRightSideBearing: globals.minRightSideBearing,
         xMaxExtent: globals.maxLeftSideBearing + (globals.xMax - globals.xMin),
-        numberOfHMetrics: font.glyphs.length
+        numberOfHMetrics: font.glyphs.length,
+        slope: font.slope,
     });
 
     const maxpTable = maxp.make(font.glyphs.length);
@@ -323,7 +332,7 @@ function fontToSfntTable(font) {
     const nameTable = _name.make(names, languageTags);
     const ltagTable = (languageTags.length > 0 ? ltag.make(languageTags) : undefined);
 
-    const postTable = post.make(font.tables.post);
+    const postTable = post.make(font);
     const cffTable = cff.make(font.glyphs, {
         version: font.getEnglishName('version'),
         fullName: englishFullName,