Use 100% font stretch as default

Author: davepagurek

src/type/p5.Font.js

@@ -691,7 +691,7 @@ export class Font {
         } 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);
@@ -977,7 +977,7 @@ function createFontFace(name, path, descriptors, rawFont) {
       if (tag === 'wght') {
         descriptors.weight = `${minVal} ${maxVal}`;
       } else if (tag === 'wdth') {
-        descriptors.stretch = `${minVal} ${maxVal}`;
+        descriptors.stretch = `${minVal}% ${maxVal}%`;
       }
       // TODO add other descriptors
     }

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();