Merge pull request #7727 from processing/fix/variable-font-firefox

Set FontFace weight ranges based on Typr info

Author: davepagurek

Diff for: src/type/p5.Font.js

@@ -684,14 +684,14 @@ export class Font {
     let axs;
     if ((this.data?.fvar?.length ?? 0) > 0) {
       const fontAxes = this.data.fvar[0];
-      axs = fontAxes.map(([tag, minVal, maxVal, defaultVal, flags, name]) => {
+      axs = fontAxes.map(([tag, minVal, defaultVal, maxVal, flags, name]) => {
         if (!renderer) return defaultVal;
         if (tag === 'wght') {
           return renderer.states.fontWeight;
         } else if (tag === 'wdth') {
           // TODO: map from keywords (normal, ultra-condensed, etc) to values
           // return renderer.states.fontStretch
-          return defaultVal;
+          return 100;
         } else if (renderer.textCanvas().style.fontVariationSettings) {
           const match = new RegExp(`\\b${tag}\s+(\d+)`)
             .exec(renderer.textCanvas().style.fontVariationSettings);
@@ -971,6 +971,18 @@ function createFontFace(name, path, descriptors, rawFont) {
     fontArg = path;
   }
 
+  if ((rawFont?.fvar?.length ?? 0) > 0) {
+    descriptors = descriptors || {};
+    for (const [tag, minVal, defaultVal, maxVal, flags, name] of rawFont.fvar[0]) {
+      if (tag === 'wght') {
+        descriptors.weight = `${minVal} ${maxVal}`;
+      } else if (tag === 'wdth') {
+        descriptors.stretch = `${minVal}% ${maxVal}%`;
+      }
+      // TODO add other descriptors
+    }
+  }
+
   // create/return the FontFace object
   let face = new FontFace(name, fontArg, descriptors);
   if (face.status === 'error') {

Diff for: test/unit/visual/cases/typography.js

@@ -113,7 +113,6 @@ visualSuite("Typography", function () {
       p5.createCanvas(100, 100);
       const font = await p5.loadFont(
         '/unit/assets/BricolageGrotesque-Variable.ttf',
-        { weight: '200 800' }
       );
       for (let weight = 400; weight <= 800; weight += 100) {
         p5.background(255);
@@ -130,7 +129,6 @@ visualSuite("Typography", function () {
       p5.createCanvas(100, 100, p5.WEBGL);
       const font = await p5.loadFont(
         '/unit/assets/BricolageGrotesque-Variable.ttf',
-        { weight: '200 800' }
       );
       for (let weight = 400; weight <= 800; weight += 100) {
         p5.push();