diff --git a/README.md b/README.md
index 812b2c17..95973891 100644
--- a/README.md
+++ b/README.md
@@ -347,6 +347,92 @@ Sets a color glyph layer's paletteIndex property to a new index
 ###### `Font.layers.updateColrTable(glyphIndex, layers)`
 Mainly used internally. Updates the colr table, adding a baseGlyphRecord if needed, ensuring that it's inserted at the correct position, updating numLayers, and adjusting firstLayerIndex values for all baseGlyphRecords according to any deletions or insertions.
 
+
+##### The `Font.variation` object (`VariationManager`)
+The `VariationManager` handles variable font properties using the OpenType font variation tables.
+
+###### `Font.variation.activateDefaultVariation()`
+Activates the default variation by setting its variation data as the font's default render options. Uses the default instance if available; otherwise, it defaults to the coordinates of all axes.
+ 
+###### `Font.variation.getDefaultCoordinates()`
+Returns the default coordinates for the font's variation axes.
+* Returns: An object mapping axis tags to their default values.
+
+###### `Font.variation.getDefaultInstanceIndex()`
+Determines and returns the index of the default variation instance. Returns `-1` if it cannot be determined.
+* Returns: Integer representing the default instance index or `-1`.
+
+###### `Font.variation.getInstanceIndex(coordinates)`
+Finds the index of the variation instance that matches the provided coordinates, or `-1` if none match.
+* `coordinates`: Object with axis tags as keys and variation values as corresponding values.
+* Returns: Integer of the matching instance index or `-1`.
+
+###### `Font.variation.getInstance(index)`
+Retrieves a specific variation instance by its zero-based index.
+* `index`: Zero-based index of the variation instance.
+* Returns: Object representing the variation instance, or `null` if the index is invalid.
+
+###### `Font.variation.set(instanceIdOrObject)`
+Sets the variation coordinates to be used by default for rendering in the font's default render options.
+* `instanceIdOrObject`: Either the zero-based index of a variation instance or an object mapping axis tags to variation values.
+
+###### `Font.variation.get()`
+Gets the current variation settings from the font's default render options.
+* Returns: Object with the current variation settings.
+
+
+##### The `Font.variation.process` object (`VariationProcessor`)
+The `VariationProcessor` is a component of the `VariationManager`, used mainly internally for computing and applying variations to the glyphs in a variable font. It handles transformations and adjustments based on the font's variable axes and instances.
+
+###### `Font.variation.process.getNormalizedCoords()`
+Returns normalized coordinates for the variation axes based on the current settings.
+* Returns: Normalized coordinates as an object mapping axis tags to normalized values.
+
+###### `Font.variation.process.interpolatePoints(points, deltas, scalar)`
+Interpolates points based on provided deltas and a scalar value.
+* `points`: Array of original points.
+* `deltas`: Array of point deltas.
+* `scalar`: Scalar value for interpolation.
+* Returns: Array of interpolated points.
+
+###### `Font.variation.process.deltaInterpolate(original, deltaValues, scalar)`
+Calculates the interpolated value for a single point given original values, deltas, and a scalar.
+* `original`: Original value of the point.
+* `deltaValues`: Array of delta values for the point.
+* `scalar`: Scalar value for interpolation.
+* Returns: Interpolated value.
+
+###### `Font.variation.process.deltaShift(points, deltas)`
+Applies delta values to shift points.
+* `points`: Array of original points.
+* `deltas`: Array of deltas to apply.
+* Returns: Array of shifted points.
+
+###### `Font.variation.process.transformComponents(components, transformation)`
+Transforms components of a glyph using a specified transformation matrix.
+* `components`: Components of the glyph.
+* `transformation`: Transformation matrix to apply.
+* Returns: Transformed components.
+
+###### `Font.variation.process.getTransform()`
+Computes the transformation matrix based on current variation settings.
+* Returns: Transformation matrix for the current variation settings.
+
+###### `Font.variation.process.getVariableAdjustment(adjustment)`
+Calculates the variable adjustment for a given adjustment parameter.
+* `adjustment`: Adjustment parameter.
+* Returns: Adjusted value based on current variation settings.
+
+###### `Font.variation.process.getDelta(deltas)`
+Selects the appropriate delta values from a collection of deltas based on the current variation settings.
+* `deltas`: Collection of delta values.
+* Returns: Appropriate delta values for the current settings.
+
+###### `Font.variation.process.getBlendVector()`
+Computes the blend vector for interpolations based on the current settings.
+* Returns: Blend vector used for interpolation calculations.
+
+
 #### The Glyph object
 A Glyph is an individual mark that often corresponds to a character. Some glyphs, such as ligatures, are a combination of many characters. Glyphs are the basic building blocks of a font.
 
@@ -466,12 +552,13 @@ MIT
 
 Thanks
 ======
-I would like to acknowledge the work of others without which opentype.js wouldn't be possible:
+We would like to acknowledge the work of others without which opentype.js wouldn't be possible:
 
 * [pdf.js](https://mozilla.github.io/pdf.js/): for an awesome implementation of font parsing in the browser.
 * [FreeType](https://www.freetype.org/): for the nitty-gritty details and filling in the gaps when the spec was incomplete.
 * [ttf.js](https://ynakajima.github.io/ttf.js/demo/glyflist/): for hints about the TrueType parsing code.
 * [CFF-glyphlet-fonts](https://pomax.github.io/CFF-glyphlet-fonts/): for a great explanation/implementation of CFF font writing.
+* [fontkit](https://github.com/foliojs/fontkit/): for a great implementation of CFF2 parsing and variable font features
 * [tiny-inflate](https://github.com/foliojs/tiny-inflate): for WOFF decompression.
 * [Microsoft Typography](https://docs.microsoft.com/en-us/typography/opentype/spec/otff): the go-to reference for all things OpenType.
 * [Adobe Compact Font Format spec](http://download.microsoft.com/download/8/0/1/801a191c-029d-4af3-9642-555f6fe514ee/cff.pdf) and the [Adobe Type 2 Charstring spec](http://download.microsoft.com/download/8/0/1/801a191c-029d-4af3-9642-555f6fe514ee/type2.pdf): explains the data structures and commands for the CFF glyph format.
diff --git a/bin/test-render b/bin/test-render
index f0ec59c1..d1d041a4 100755
--- a/bin/test-render
+++ b/bin/test-render
@@ -37,6 +37,7 @@ function printUsage() {
 let filename;
 let testcase;
 let textToRender;
+let variation;
 for (let i = 0; i < process.argv.length; i++) {
     const arg = process.argv[i];
     if (arg.startsWith('--font=')) {
@@ -45,6 +46,12 @@ for (let i = 0; i < process.argv.length; i++) {
         testcase = arg.substring('--testcase='.length);
     } else if (arg.startsWith('--render=')) {
         textToRender = arg.substring('--render='.length);
+    } else if (arg.startsWith('--variation=')) {
+        variation = {};
+        arg.substring('--variation='.length).split(';').forEach(function (setting) {
+            var parts = setting.split(':');
+            variation[parts[0]] = parseFloat(parts[1]);
+        });
     }
 }
 
@@ -53,38 +60,147 @@ if (filename === undefined || testcase === undefined || textToRender === undefin
   process.exit(1);
 }
 
+// getPath function from fontkit adapted to opentype.js
+function getPath(points) {
+    const path = new opentype.Path();
+    if (!points) {
+        return path;
+    }
+    
+    const contours = opentype.Glyph.prototype.getContours.call(this, points);
+
+    for (let i = 0; i < contours.length; i++) {
+        let contour = contours[i];
+        let firstPt = contour[0];
+        let lastPt = contour[contour.length - 1];
+        let start = 0;
+  
+        if (firstPt.onCurve) {
+            // The first point will be consumed by the moveTo command, so skip in the loop
+            var curvePt = null;
+            start = 1;
+        } else {
+            if (lastPt.onCurve) {
+                // Start at the last point if the first point is off curve and the last point is on curve
+                firstPt = lastPt;
+            } else {
+                // Start at the middle if both the first and last points are off curve
+                firstPt = {x: (firstPt.x + lastPt.x) / 2, y: (firstPt.y + lastPt.y) / 2, onCurve: falses};
+            }
+
+            var curvePt = firstPt;
+        }
+  
+        path.moveTo(firstPt.x, firstPt.y);
+  
+        for (let j = start; j < contour.length; j++) {
+            let pt = contour[j];
+            let prevPt = j === 0 ? firstPt : contour[j - 1];
+
+            if (prevPt.onCurve && pt.onCurve) {
+                path.lineTo(pt.x, pt.y);
+            } else if (prevPt.onCurve && !pt.onCurve) {
+                var curvePt = pt;
+            } else if (!prevPt.onCurve && !pt.onCurve) {
+                let midX = (prevPt.x + pt.x) / 2;
+                let midY = (prevPt.y + pt.y) / 2;
+                path.quadraticCurveTo(prevPt.x, prevPt.y, midX, midY);
+                var curvePt = pt;
+            } else if (!prevPt.onCurve && pt.onCurve) {
+                path.quadraticCurveTo(curvePt.x, curvePt.y, pt.x, pt.y);
+                var curvePt = null;
+            } else {
+                throw new Error("Unknown TTF path state");
+            }
+        }
+  
+        // Connect the first and last points
+        if (curvePt) {
+          path.quadraticCurveTo(curvePt.x, curvePt.y, firstPt.x, firstPt.y);
+        }
+  
+        path.closePath();
+    }
+
+    return path;
+}
+
 function renderSVG() {
     var font = opentype.loadSync(filename);
 
     let svgSymbols = [];
     let svgBody = [];
 
-    var glyphSet = new Set();
-    let glyphData = [];
+    var symbolSet = new Set();
 
     const fontSize = font.unitsPerEm;
     let minWidth = 0;
+    if(variation && font.variation) {
+        font.variation.set(variation);
+    }
+
+    const scale = 1 / font.unitsPerEm * 1000;
+
     font.forEachGlyph(textToRender, 0, 0, fontSize, {}, function(glyph, gX, gY, gFontSize) {
-        const glyphPath = glyph.getPath(gX, gY, gFontSize, {}, this);
-        const glyphWidth = glyph.getMetrics().xMax;
-        glyphData.push({glyph: glyph, path: glyphPath, gX, gY, w: glyphWidth});
-    });
+        let glyphName = glyph.name;
+        if(!glyphName || /^cid\d+$/.test(glyphName)) {
+            glyphName = `gid${glyph.index}`;
+        }
+        const 
+        symbolId = testcase + '.' + glyphName;
+
+        // TrueType paths from opentype.js are often visually the same as fontkit's, but because
+        // of minor differences in path construction, tests will fail.
+        // Therefore we re-calculate the path based on the points.
+        const pointsTransform = function(points) {
+            // Scale to 1000
+            for (point of points) {
+                point.x *= scale;
+                point.y *= scale;
+            }
+            
+            const path = getPath(points);
+            return path;
+        }
+
+        const pathTransform = function(path) {
+            // filter out lines back to the starting point of a contour
+            var startX = 0, startY = 0;
+            path.commands = path.commands.filter(function (c, i) {
+                path.commands[i] = c;
+                if (c.type === 'M') {
+                    startX = c.x;
+                    startY = c.y;
+                } else if (c.type === 'L' && (!path.commands[i + 1] || path.commands[i + 1].type === 'Z')) {
+                    return Math.abs(c.x - startX) > 1 || Math.abs(c.y - startY) > 1;
+                }
+
+                return true;
+            });
+
+            return path;
+        };
+
+        if (!symbolSet.has(symbolId)) {
+            const svgPath = glyph.toSVG({optimize: true, decimalPlaces: 2, flipY: false, pointsTransform, pathTransform}, font)
+                // normalize with other renderers
+                .replace(/(\d+) (-?\d+)/g, '$1,$2')
+                .replace(/(\d)(-)/g, '$1,$2')
+                .replace(/(\d)([A-Z])/g, '$1 $2')
+                .replace(/Z([^\s])/g, 'Z $1')
+                .replace(/\.\d+/g, '');
 
-    for (let i = 0; i < glyphData.length; i++) {
-        const glyph = glyphData[i].glyph;
-        const path = glyphData[i].path;
-        const symbolId = testcase + '.' + glyph.name;
-        if (!glyphSet.has(glyph)) {
-            glyphSet.add(glyph);
-            const svgPath = glyph.path.toSVG({optimize: true, decimalPlaces: 0, flipY: false});
             svgSymbols.push(`  <symbol id="${symbolId}" overflow="visible">${svgPath}</symbol>`);
+            symbolSet.add(symbolId);
         }
-        svgBody.push(`  <use xlink:href="#${symbolId}" x="${glyphData[i].gX}" y="${glyphData[i].gY}"/>`);
-        let xMax = glyphData[i].gX + glyph.advanceWidth;
+        svgBody.push(`  <use xlink:href="#${symbolId}" x="${gX}" y="${gY}"/>`);
+        let xMax = gX + glyph.advanceWidth;
         if(xMax > minWidth) {
             minWidth = xMax;
         }
-    }
+
+        const glyphWidth = glyph.getMetrics().xMax;
+    });
 
     let minX = 0;
     let minY = Math.round(font.descender);
@@ -93,7 +209,7 @@ function renderSVG() {
 <svg version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
-    viewBox="${minX} ${minY} ${minWidth} ${height}">`;
+    viewBox="${Math.round(minX * scale)} ${Math.round(minY * scale)} ${Math.round(minWidth * scale)} ${Math.round(height * scale)}">`;
 
     return svgHeader + svgSymbols.join('\n') + svgBody.join('\n') + SVG_FOOTER;
 }
diff --git a/docs/font-inspector.html b/docs/font-inspector.html
index e5ac87ff..c03175bf 100644
--- a/docs/font-inspector.html
+++ b/docs/font-inspector.html
@@ -4,6 +4,7 @@
 <meta name="description" content="A JavaScript library to manipulate the letterforms of text from the browser or node.js.">
 <meta charset="utf-8">
 <link rel="stylesheet" href="site.css">
+<script src="site.js"></script>
 
 <div class="header">
     <div class="container">
@@ -102,7 +103,6 @@ <h1>Free Software</h1>
 
 var font = null;
 const fontSize = 32;
-const textToRender = 'Grumpy wizards make toxic brew for the evil Queen and Jack.';
 const drawOptions = {
     kerning: true,
     features: [
@@ -142,6 +142,8 @@ <h1>Free Software</h1>
 function renderText(font) {
     if (!font) return;
 
+    const textToRender = conditionalSampleText(font, 'Grumpy wizards make toxic brew for the evil Queen and Jack.');
+
     var previewCanvas = document.getElementById('preview');
     var previewCtx = previewCanvas.getContext("2d");
     previewCtx.clearRect(0, 0, previewCanvas.width, previewCanvas.height);
diff --git a/docs/glyph-inspector.html b/docs/glyph-inspector.html
index d020c471..401a3aec 100644
--- a/docs/glyph-inspector.html
+++ b/docs/glyph-inspector.html
@@ -4,6 +4,7 @@
 <meta name="description" content="A JavaScript library to manipulate the letterforms of text from the browser or node.js.">
 <meta charset="utf-8">
 <link rel="stylesheet" href="site.css">
+<script src="site.js"></script>
 
 <div class="header">
     <div class="container">
@@ -32,6 +33,7 @@ <h1>Glyph Inspector</h1>
     <hr>
 
     <div>
+        <div id="variation-options"></div>
         <div id="colr-cpal-options" style="display:none">
             <label><input type="checkbox" name="drawLayers" oninput="window.fontOptions.drawLayers = this.checked; window.redraw();"> options.drawLayers</label><br>
             <div id="palettes"></div>
@@ -160,7 +162,7 @@ <h1>Free Software</h1>
     }
     html += '</dl>';
     if (glyph.numberOfContours > 0) {
-        var contours = glyph.getContours();
+        var contours = glyph.getContours(window.font.variation.getTransform(glyph, window.fontOptions.variation).points);
         html += 'contours:<div id="glyph-contours">' + contours.map(contourToString).join('\n') + '</div>';
     } else if (glyph.isComposite) {
         html += '<br>This composite glyph is a combination of :<ul><li>' +
@@ -389,27 +391,13 @@ <h1>Free Software</h1>
     hline('Typo Descender', font.tables.os2.sTypoDescender);
 }
 
-function arrayBufferToBase64(buffer) {
-    const CHUNK_SIZE = 8192;
-    let result = '';
-    const uintArray = new Uint8Array(buffer);
-
-    for (let i = 0; i < uintArray.length; i += CHUNK_SIZE) {
-        const chunk = uintArray.subarray(i, i + CHUNK_SIZE);
-        result += String.fromCharCode.apply(null, chunk);
-    }
-
-    return btoa(result);
-}
-
-function base64ToArrayBuffer(base64) {
-    return Uint8Array.from(atob(base64), c => c.charCodeAt(0)).buffer;
-}
-
-window.redraw = function(withColors = true) {
-    if ( withColors ) {
+window.redraw = function(options = { withColors: true, withVariations: true }) {
+    if ( options.withColors ) {
         updateColrOptions();
     }
+    if ( options.withVariations ) {
+        updateVariationOptions();
+    }
     const selectedPage = document.querySelector('.page-selected');
     const pageIndex = Array.from(selectedPage.parentElement.children).indexOf(selectedPage);    
     displayGlyphPage(pageIndex);
@@ -420,29 +408,6 @@ <h1>Free Software</h1>
     }
 }
 
-function throttleDebounce(func, wait) {
-    let timeout = null;
-    let lastFunc;
-    let lastRan;
-
-    return function() {
-        const context = this;
-        const args = arguments;
-        if (!lastRan) {
-            func.apply(context, args);
-            lastRan = Date.now();
-        } else {
-            clearTimeout(lastFunc);
-            lastFunc = setTimeout(function() {
-                if ((Date.now() - lastRan) >= wait) {
-                    func.apply(context, args);
-                    lastRan = Date.now();
-                }
-            }, Math.max(wait - (Date.now() - lastRan), 0));
-        }
-    };
-}
-
 function updateColrOptions() {
     const palettes = window.font.palettes.getAll('hexa');
     const palettesDiv = document.getElementById('palettes');
@@ -459,7 +424,7 @@ <h1>Free Software</h1>
         });
     }
     markup += '<p><button type="button" onclick="font.palettes.add(); redraw();">+</button></p>';
-    palettesDiv.innerHTML += markup;
+    palettesDiv.innerHTML = markup;
 
     document.getElementById('colr-cpal-options').style.display = window.font.tables.cpal ? 'block' : 'none';
 }
@@ -494,6 +459,10 @@ <h1>Free Software</h1>
     alphaPicker.addEventListener('input', colorChangeHandler);
 };
 
+window.throttledRedraw = throttleDebounce((...args) => {
+    window.redraw(...args);
+}, 50);
+
 function onFontLoaded(font) {
     if (window.font) {
         window.font.onGlyphUpdated = null
@@ -503,6 +472,7 @@ <h1>Free Software</h1>
     window.fontOptions = options;
 
     updateColrOptions();
+    updateVariationOptions();
 
     var w = cellWidth - cellMarginLeftRight * 2,
         h = cellHeight - cellMarginTop - cellMarginBottom,
@@ -563,6 +533,8 @@ <h1>Free Software</h1>
         canvas.className = 'item';
         canvas.id = 'g'+i;
         canvas.addEventListener('click', cellSelect, false);
+        canvas.addEventListener('keypress', (ev) => ev.keyCode === 13 && cellSelect(ev) , false);
+        canvas.tabIndex = 0;
         enableHighDPICanvas(canvas);
         parent.insertBefore(canvas, marker);
     }
@@ -592,6 +564,7 @@ <h1>Free Software</h1>
         if ( !error ) showErrorMessage('');
     } catch (err) {
         showErrorMessage(err.toString());
+        throw err;
     }
 }
 
diff --git a/docs/index.html b/docs/index.html
index 54a08a75..5f8fd629 100755
--- a/docs/index.html
+++ b/docs/index.html
@@ -4,6 +4,7 @@
 <meta name="description" content="A JavaScript library to manipulate the letterforms of text from the browser or node.js.">
 <meta charset="utf-8">
 <link rel="stylesheet" href="site.css">
+<script src="site.js"></script>
 
 <div class="header">
     <div class="container">
@@ -35,7 +36,9 @@ <h1><a href="./">opentype.js</a></h1>
     <label><input type="checkbox" name="drawMetrics">Draw Metrics</label>
     <label><input type="checkbox" name="kerning" checked="checked">Kerning</label>
     <label><input type="checkbox" name="ligatures" checked="checked">Ligatures</label>
-    <label class="disabled"><input name="hinting" type="checkbox" onchange="hintingChanged(this)" disabled="true">Hinting</label>
+    <label class="disabled"><input name="hinting" type="checkbox" disabled="true">Hinting</label>
+
+    <div id="variation-options"></div>
 
     <hr>
 
@@ -79,6 +82,7 @@ <h1>Free Software</h1>
 form.oninput = renderText;
 let font = null;
 
+let options = {};
 
 function doSnap(path) {
     const layers = path._layers;
@@ -114,7 +118,8 @@ <h1>Free Software</h1>
 function renderText() {
     const font = window.font;
     if (!font) return;
-    const textToRender = form.textField.value;
+    const textToRender = conditionalSampleText(font, form.textField.value);
+
     var previewCtx = document.getElementById('preview').getContext('2d');
     var options = Object.assign({}, font.defaultRenderOptions, getDrawOptions());
     previewCtx.clearRect(0, 0, 940, 300);
@@ -135,7 +140,7 @@ <h1>Free Software</h1>
 }
 
 function getDrawOptions() {
-    return {
+    const options = {
         kerning: form.kerning.checked,
         hinting: form.hinting.checked,
         features: {
@@ -143,8 +148,20 @@ <h1>Free Software</h1>
             rlig: form.ligatures.checked
         }
     };
+    window.fontOptions = Object.assign({}, window.font.defaultRenderOptions, window.fontOptions, options);
+    return window.fontOptions;
 }
 
+window.redraw = function(options = { withColors: true, withVariations: true }) {
+    if ( options.withVariations ) {
+        updateVariationOptions();
+    }
+};
+
+window.throttledRedraw = throttleDebounce((...args) => {
+    window.redraw(...args);
+}, 50);
+
 function enableHighDPICanvas(canvas) {
     if (typeof canvas === 'string') {
         canvas = document.getElementById(canvas);
@@ -191,6 +208,10 @@ <h1>Free Software</h1>
         window.font.onGlyphUpdated = null
     }
     window.font = font;
+    options = Object.assign({}, window.font.defaultRenderOptions);
+    window.fontOptions = options;
+    
+    updateVariationOptions();
 
     // Show the first 100 glyphs.
     const glyphsDiv = document.getElementById('glyphs');
@@ -233,8 +254,7 @@ <h1>Free Software</h1>
         }
 
         const textToRender = form.textField.value;
-        const options = Object.assign({}, font.defaultRenderOptions, getDrawOptions());
-        const glyphIds = font.stringToGlyphIndexes(textToRender, options);
+        const glyphIds = font.stringToGlyphIndexes(textToRender, getDrawOptions());
         if (glyphIds.includes(glyphId)) {
             renderText();
         }
@@ -250,8 +270,17 @@ <h1>Free Software</h1>
     }
     try {
         const data = await file.arrayBuffer();
-        onFontLoaded(opentype.parse(isWoff2 ? Module.decompress(data) : data));
-        showErrorMessage('');
+        let error;
+        try {
+            const base64String = arrayBufferToBase64(data);
+            sessionStorage.setItem('fontData', base64String);
+        } catch (err) {
+            showErrorMessage('Error loading font from localStorage');
+            error = err;
+        }     
+
+        onFontLoaded(opentype.parse(isWoff2 ? Module.decompress(data) : data, { lowMemory: true }));
+        if ( !error ) showErrorMessage('');
     } catch (err) {
         showErrorMessage(err.toString());
     }
@@ -264,6 +293,12 @@ <h1>Free Software</h1>
 enableHighDPICanvas('preview');
 enableHighDPICanvas('snap');
 
-const fontFileName = 'fonts/FiraSansMedium.woff';
-display(await fetch(fontFileName), fontFileName);
+const fontData = sessionStorage.getItem('fontData');
+if ( fontData ) {
+    const arrayBuffer = base64ToArrayBuffer(fontData);
+    onFontLoaded(opentype.parse(arrayBuffer));
+} else {
+    const fontFileName = 'fonts/FiraSansMedium.woff';
+    display(await fetch(fontFileName), fontFileName);
+}
 </script>
diff --git a/docs/site.css b/docs/site.css
index 0d2d90a4..bb2d5f4a 100644
--- a/docs/site.css
+++ b/docs/site.css
@@ -372,4 +372,14 @@ button.color-swatch {
 #layers canvas.item:hover {
     cursor: default;
     background-color: transparent;
+}
+
+#variation-options {
+    display: flex;
+    gap: 1.5em;
+}
+
+#variation-options label + span {
+    display: inline-block;
+    min-width: 4ch;
 }
\ No newline at end of file
diff --git a/docs/site.js b/docs/site.js
new file mode 100644
index 00000000..c4bcabb4
--- /dev/null
+++ b/docs/site.js
@@ -0,0 +1,124 @@
+function throttleDebounce(func, wait) {
+    let timeout = null;
+    let lastFunc;
+    let lastRan;
+
+    return function() {
+        const context = this;
+        const args = arguments;
+        if (!lastRan) {
+            func.apply(context, args);
+            lastRan = Date.now();
+        } else {
+            clearTimeout(lastFunc);
+            lastFunc = setTimeout(function() {
+                if ((Date.now() - lastRan) >= wait) {
+                    func.apply(context, args);
+                    lastRan = Date.now();
+                }
+            }, Math.max(wait - (Date.now() - lastRan), 0));
+        }
+    };
+}
+
+function arrayBufferToBase64(buffer) {
+    const CHUNK_SIZE = 8192;
+    let result = '';
+    const uintArray = new Uint8Array(buffer);
+
+    for (let i = 0; i < uintArray.length; i += CHUNK_SIZE) {
+        const chunk = uintArray.subarray(i, i + CHUNK_SIZE);
+        result += String.fromCharCode.apply(null, chunk);
+    }
+
+    return btoa(result);
+}
+
+function base64ToArrayBuffer(base64) {
+    return Uint8Array.from(atob(base64), c => c.charCodeAt(0)).buffer;
+}
+
+function isFloat(value) {
+    return parseInt(value) !== value;
+}
+
+function updateVariationOptions() {
+    const variationsDiv = document.getElementById('variation-options');
+    variationsDiv.innerHTML = '';
+    if (!window?.font?.variation) return;
+    
+    const markup = `
+        <div>
+                ${window.font.tables.fvar.axes.map((a,idx) => {
+                    const currentValue = (window.fontOptions.variation||{})[a.tag] || a.defaultValue;
+                    // decide whether to allow float steps for the range slider
+                    // always enable for uppercase tags or tags ending with spaces
+                    const floatSteps = isFloat(a.minValue) || isFloat(a.defaultValue) || isFloat(a.maxValue) || /^[A-Z]{0,4}\s*$/.test(a.tag);
+                    let label = a.name?.en;
+                    if(label) {
+                        label += ` (${a.tag.trim()})`;
+                    } else {
+                        label = a.tag.trim();
+                    }
+                    return `<p><label><strong>${label}</strong>
+                        <input type="range" id="variation-tag-${a.tag}" step="${floatSteps ? 0.01 : 1}" min="${a.minValue}" max="${a.maxValue}" value="${currentValue}" oninput="onVariationChange(event)"></label> <span>${currentValue}</span></p>`;
+                }).join('')}
+        </div>
+        <div>
+            <p><label><strong>Variation Instance:</strong>
+            <select id="variation-instance" oninput="changeVariationInstance(event)">
+                ${window.font.tables.fvar.instances.map((i,idx) => {
+                    const selected = window.font.variation.getInstanceIndex(window.font.defaultRenderOptions.variation) === idx ? ' selected' : '';
+                    return `<option value="${idx}"${selected}>${i.name?.en || JSON.stringify(i.coordinates)}</option>`
+                }).join('')}
+                <option${!window.font.tables.fvar.instances.length ? ' selected' : ''} disabled>custom</option>
+            </select></label></p>
+        </div>
+    `;
+    variationsDiv.innerHTML = markup;
+}
+
+function onVariationChange(event) {
+    const input = event.target;
+    input.parentNode.nextElementSibling.innerText = input.value;
+    const instanceIndex = window.font.variation.getInstanceIndex(getCurrentCoords());
+    document.getElementById('variation-instance').value = instanceIndex > -1 ? instanceIndex : 'custom';
+    window.fontOptions.variation = getCurrentCoords();
+    window.font.variation.set(getCurrentCoords());
+    throttledRedraw({withVariations: false});
+};
+
+function conditionalSampleText(font, textToRender) {
+    const fontSampleText = font.getEnglishName('sampleText');
+    const isEmpty = !font.stringToGlyphs(textToRender).filter((g) => !!g && g.name !== '.notdef' && g.unicode !== 32 && !g.unicodes.includes(32)).length;
+    if(fontSampleText && isEmpty) {
+        textToRender = font.getEnglishName('sampleText');
+        if(document.forms.demo?.textField?.value) {
+            document.forms.demo.textField.value = textToRender;
+        }
+    }
+    return textToRender;
+}
+
+function changeVariationInstance(event) {
+    const selected = event.target.value;
+    if (selected !== 'custom') {
+        Object.entries(window.font.tables.fvar.instances[selected].coordinates).forEach(([tag, value]) => {
+            const slider = document.getElementById(`variation-tag-${tag}`);
+            slider.value = value;
+            slider.parentElement.nextElementSibling.innerText = value;
+        });
+        window.font.variation.set(parseInt(event.target.value));
+    }
+    window.fontOptions.variation = getCurrentCoords();
+    window.font.variation.set(getCurrentCoords());
+    window.redraw({withVariations: false});
+};
+
+function getCurrentCoords() {
+    return Array.from(document.querySelectorAll('input[id^="variation-tag-"]')).reduce((acc, input) => {
+        const tag = input.id.substring("variation-tag-".length);
+        acc[tag] = parseFloat(input.value);
+        return acc;
+    }, {});
+}
\ No newline at end of file
diff --git a/src/font.js b/src/font.js
index 13466de2..3029019e 100644
--- a/src/font.js
+++ b/src/font.js
@@ -9,6 +9,7 @@ import Substitution from './substitution.js';
 import { PaletteManager } from './palettes.js';
 import { LayerManager } from './layers.js';
 import { SVGImageManager } from './svgimages.js';
+import { VariationManager } from './variation.js';
 import { isBrowser, checkArgument } from './util.js';
 import HintingTrueType from './hintingtt.js';
 import Bidi from './bidi.js';
@@ -141,6 +142,17 @@ function Font(options) {
     this.position = new Position(this);
     this.substitution = new Substitution(this);
     this.tables = this.tables || {};
+
+    this.tables = new Proxy(this.tables, {
+        set: (tables, tableName, tableData) => {
+            tables[tableName] = tableData;
+            if (tables.fvar && (tables.gvar || tables.cff2) && !this.variation) {
+                this.variation = new VariationManager(this);
+            }
+            return true;
+        }
+    });
+
     this.palettes = new PaletteManager(this);
     this.layers = new LayerManager(this);
     this.svgImages = new SVGImageManager(this);
@@ -419,7 +431,7 @@ Font.prototype.getPath = function(text, x, y, fontSize, options) {
         const scale = 1 / (fullPath.unitsPerEm || 1000) * fontSize;
         fullPath.strokeWidth *= scale;
     }
-    this.forEachGlyph(text, x, y, fontSize, options, function(glyph, gX, gY, gFontSize) {
+    this.forEachGlyph(text, x, y, fontSize, options, (glyph, gX, gY, gFontSize) => {
         const glyphPath = glyph.getPath(gX, gY, gFontSize, options, this);
         if ( options.drawSVG || options.drawLayers ) {
             const layers = glyphPath._layers;
diff --git a/src/glyph.js b/src/glyph.js
index e0ff16f4..978f996d 100644
--- a/src/glyph.js
+++ b/src/glyph.js
@@ -103,6 +103,10 @@ Glyph.prototype.bindConstructorValues = function(options) {
         this.leftSideBearing = options.leftSideBearing;
     }
 
+    if ('points' in options) {
+        this.points = options.points;
+    }
+
     // The path for a glyph is the most memory intensive, and is bound as a value
     // with a getter/setter to ensure we actually do path parsing only once the
     // path is actually needed by anything.
@@ -134,7 +138,7 @@ Glyph.prototype.getBoundingBox = function() {
  * @param  {number} [y=0] - Vertical position of the *baseline* of the text.
  * @param  {number} [fontSize=72] - Font size in pixels. We scale the glyph units by `1 / unitsPerEm * fontSize`.
  * @param  {GlyphRenderOptions=} options - xScale, yScale to stretch the glyph.
- * @param  {opentype.Font} font if hinting is to be used, or CPAL/COLR needs to be rendered, the font
+ * @param  {opentype.Font} font if hinting is to be used, or CPAL/COLR / variation needs to be rendered, the font
  * @return {opentype.Path}
  */
 Glyph.prototype.getPath = function(x, y, fontSize, options, font) {
@@ -148,10 +152,17 @@ Glyph.prototype.getPath = function(x, y, fontSize, options, font) {
     let yScale = options.yScale;
     const scale = 1 / (this.path.unitsPerEm || 1000) * fontSize;
 
+    let useGlyph = this;
+
+    if(font && font.variation) {
+        useGlyph = font.variation.getTransform(this, options.variation);
+        commands = useGlyph.path.commands;
+    }
+    
     if (options.hinting && font && font.hinting) {
         // in case of hinting, the hinting engine takes care
         // of scaling the points (not the path) before hinting.
-        hPoints = this.path && font.hinting.exec(this, fontSize);
+        hPoints = useGlyph.path && font.hinting.exec(useGlyph, fontSize, options);
         // in case the hinting engine failed hPoints is undefined
         // and thus reverts to plain rending
     }
@@ -164,7 +175,7 @@ Glyph.prototype.getPath = function(x, y, fontSize, options, font) {
         // TODO in case of hinting xyScaling is not yet supported
         xScale = yScale = 1;
     } else {
-        commands = this.path.commands;
+        commands = useGlyph.path.commands;
         if (xScale === undefined) xScale = scale;
         if (yScale === undefined) yScale = scale;
     }
@@ -256,17 +267,21 @@ Glyph.prototype.getSvgImage = function(font) {
  * Split the glyph into contours.
  * This function is here for backwards compatibility, and to
  * provide raw access to the TrueType glyph outlines.
+ * @param {Array|null} [transformedPoints=null] Use the supplied transformed points from a glyph variation instead of the regular glyph points
  * @return {Array}
  */
-Glyph.prototype.getContours = function() {
-    if (this.points === undefined) {
+Glyph.prototype.getContours = function(transformedPoints = null) {
+    if (this.points === undefined && !transformedPoints) {
         return [];
     }
 
     const contours = [];
     let currentContour = [];
-    for (let i = 0; i < this.points.length; i += 1) {
-        const pt = this.points[i];
+
+    let points = transformedPoints ? transformedPoints : this.points;
+
+    for (let i = 0; i < points.length; i += 1) {
+        const pt = points[i];
         currentContour.push(pt);
         if (pt.lastPointOfContour) {
             contours.push(currentContour);
@@ -339,7 +354,7 @@ Glyph.prototype.getMetrics = function() {
  * @param  {number} [y=0] - Vertical position of the *baseline* of the text.
  * @param  {number} [fontSize=72] - Font size in pixels. We scale the glyph units by `1 / unitsPerEm * fontSize`.
  * @param  {Object=} options - xScale, yScale to stretch the glyph.
- * @param  {opentype.Font} font - xScale, yScale to stretch the glyph.
+ * @param  {opentype.Font} font - if hinting is to be used, or CPAL/COLR / variation needs to be rendered, the font
  */
 Glyph.prototype.draw = function(ctx, x, y, fontSize, options, font) {
     options = Object.assign({}, font.defaultRenderOptions, options);
@@ -389,8 +404,14 @@ Glyph.prototype.drawPoints = function(ctx, x, y, fontSize, options, font) {
     const blueCircles = [];
     const redCircles = [];
     const path = this.path;
-    for (let i = 0; i < path.commands.length; i += 1) {
-        const cmd = path.commands[i];
+    let commands = path.commands;
+    
+    if(font && font.variation) {
+        commands = font.variation.getTransform(this, options.variation).path.commands;
+    }
+
+    for (let i = 0; i < commands.length; i += 1) {
+        const cmd = commands[i];
         if (cmd.x !== undefined) {
             blueCircles.push({x: cmd.x, y: -cmd.y});
         }
@@ -455,12 +476,24 @@ Glyph.prototype.drawMetrics = function(ctx, x, y, fontSize) {
 
 /**
  * Convert the Glyph's Path to a string of path data instructions
- * @param  {object|number} [options={decimalPlaces:2, optimize:true}] - Options object (or amount of decimal places for floating-point values for backwards compatibility)
+ * @param  {object|number} [options={decimalPlaces:2, optimize:true, variation:undefined}] - Options object (or amount of decimal places for floating-point values for backwards compatibility)
+ * @param  {opentype.Font} font - A font object is required if variation is to be applied in order to get the variation data from the tables
  * @return {string}
  * @see Path.toPathData
  */
-Glyph.prototype.toPathData = function(options) {
-    return this.path.toPathData(options);
+Glyph.prototype.toPathData = function(options, font) {
+    options = Object.assign({}, { variation: font && font.defaultRenderOptions.variation }, options);
+    let useGlyph = this;
+    if(font && font.variation) {
+        useGlyph = font.variation.getTransform(this, options.variation);
+    }
+
+    let usePath = useGlyph.points && options.pointsTransform ? options.pointsTransform(useGlyph.points) : useGlyph.path;
+    if(options.pathTramsform) {
+        usePath = options.pathTramsform(usePath);
+    }
+
+    return usePath.toPathData(options);
 };
 
 /**
@@ -474,20 +507,29 @@ Glyph.prototype.fromSVG = function(pathData, options = {}) {
 
 /**
  * Convert the Glyph's Path to an SVG <path> element, as a string.
- * @param  {object|number} [options={decimalPlaces:2, optimize:true}] - Options object (or amount of decimal places for floating-point values for backwards compatibility)
+ * @param  {object|number} [options={decimalPlaces:2, optimize:true, variation:undefined}] - Options object (or amount of decimal places for floating-point values for backwards compatibility)
+ * @param  {opentype.Font} font - A font object is required if variation is to be applied in order to get the variation data from the tables 
  * @return {string}
  */
-Glyph.prototype.toSVG = function(options) {
-    return this.path.toSVG(options, this.toPathData.apply(this, [options]));
+Glyph.prototype.toSVG = function(options, font) {
+    const pathData = this.toPathData.apply(this, [options, font]);
+    return this.path.toSVG(options, pathData);
 };
 
 /**
  * Convert the path to a DOM element.
- * @param  {object|number} [options={decimalPlaces:2, optimize:true}] - Options object (or amount of decimal places for floating-point values for backwards compatibility)
+ * @param  {object|number} [options={decimalPlaces:2, optimize:true, variation:undefined}] - Options object (or amount of decimal places for floating-point values for backwards compatibility)
+ * @param  {opentype.Font} font - A font object is required if variation is to be applied in order to get the variation data from the tables 
  * @return {SVGPathElement}
  */
-Glyph.prototype.toDOMElement = function(options) {
-    return this.path.toDOMElement(options);
+Glyph.prototype.toDOMElement = function(options, font) {
+    options = Object.assign({}, { variation: font && font.defaultRenderOptions.variation }, options);
+
+    let usePath = this.path;
+    if(font && font.variation) {
+        usePath = font.variation.getTransform(this, options.variation).path;
+    }
+    return usePath.toDOMElement(options);
 };
 
 export default Glyph;
diff --git a/src/glyphset.js b/src/glyphset.js
index 8691dcc8..4b73d3fc 100644
--- a/src/glyphset.js
+++ b/src/glyphset.js
@@ -7,7 +7,10 @@ function defineDependentProperty(glyph, externalName, internalName) {
     Object.defineProperty(glyph, externalName, {
         get: function() {
             // Request the path property to make sure the path is loaded.
-            glyph.path; // jshint ignore:line
+            // optimization: do it only when the internal property is undefined,
+            // in order to prevent unnecessary computations, as well endless loops
+            // in the case of the points property
+            typeof glyph[internalName] === 'undefined' && glyph.path; // jshint ignore:line
             return glyph[internalName];
         },
         set: function(newValue) {
@@ -141,6 +144,7 @@ function ttfGlyphLoader(font, index, parseGlyph, data, position, buildPath) {
         defineDependentProperty(glyph, 'xMax', '_xMax');
         defineDependentProperty(glyph, 'yMin', '_yMin');
         defineDependentProperty(glyph, 'yMax', '_yMax');
+        defineDependentProperty(glyph, 'points', '_points');
         
         return glyph;
     };
diff --git a/src/hintingtt.js b/src/hintingtt.js
index a39c6e1d..90e42cef 100644
--- a/src/hintingtt.js
+++ b/src/hintingtt.js
@@ -621,7 +621,7 @@ Hinting.prototype.exec = function(glyph, ppem) {
 
         // Creates a copy of the cvt table
         // and scales it to the current ppem setting.
-        const oCvt = font.tables.cvt;
+        const oCvt = font.variation && font.variation.process.getCvarTransform() || font.tables.cvt;
         if (oCvt) {
             const cvt = prepState.cvt = new Array(oCvt.length);
             const scale = ppem / font.unitsPerEm;
diff --git a/src/opentype.js b/src/opentype.js
index d827fa14..256b4d75 100644
--- a/src/opentype.js
+++ b/src/opentype.js
@@ -20,6 +20,7 @@ import fvar from './tables/fvar.js';
 import gvar from './tables/gvar.js';
 import cvar from './tables/cvar.js';
 import avar from './tables/avar.js';
+import hvar from './tables/hvar.js';
 import glyf from './tables/glyf.js';
 import gdef from './tables/gdef.js';
 import gpos from './tables/gpos.js';
@@ -276,6 +277,7 @@ function parseBuffer(buffer, opt={}) {
     let gposTableEntry;
     let gsubTableEntry;
     let hmtxTableEntry;
+    let hvarTableEntry;
     let kernTableEntry;
     let locaTableEntry;
     let nameTableEntry;
@@ -329,6 +331,9 @@ function parseBuffer(buffer, opt={}) {
                 font.descender = font.tables.hhea.descender;
                 font.numberOfHMetrics = font.tables.hhea.numberOfHMetrics;
                 break;
+            case 'HVAR':
+                hvarTableEntry = tableEntry;
+                break;
             case 'hmtx':
                 hmtxTableEntry = tableEntry;
                 break;
@@ -401,6 +406,9 @@ function parseBuffer(buffer, opt={}) {
                 table = uncompressTable(data, tableEntry);
                 font.tables.svg = svg.parse(table.data, table.offset);
                 break;
+            default:
+                // console.info(`Skipping unsupported table ${tableEntry.tag}`);
+                break;
         }
     }
 
@@ -494,6 +502,19 @@ function parseBuffer(buffer, opt={}) {
         font.tables.avar = avar.parse(avarTable.data, avarTable.offset, font.tables.fvar);
     }
 
+    if (hvarTableEntry) {
+        if (!fvarTableEntry) {
+            console.warn('This font provides an HVAR table, but no fvar table, which is required for variable fonts.');
+        }
+
+        if (!hmtxTableEntry) {
+            console.warn('This font provides an HVAR table, but no hmtx table to vary.');
+        }
+
+        const hvarTable = uncompressTable(data, hvarTableEntry);
+        font.tables.hvar = hvar.parse(hvarTable.data, hvarTable.offset, font.tables.fvar);
+    }
+
     if (metaTableEntry) {
         const metaTable = uncompressTable(data, metaTableEntry);
         font.tables.meta = meta.parse(metaTable.data, metaTable.offset);
diff --git a/src/parse.js b/src/parse.js
index 84967fef..4b405260 100644
--- a/src/parse.js
+++ b/src/parse.js
@@ -29,6 +29,13 @@ function getULong(dataView, offset) {
     return dataView.getUint32(offset, false);
 }
 
+// Retrieve a signed 32-bit long from the DataView.
+// The value is stored in big endian.
+function getLong(dataView, offset) {
+    return dataView.getInt32(offset, false);
+}
+
+
 // Retrieve a 32-bit signed fixed-point number (16.16) from the DataView.
 // The value is stored in big endian.
 function getFixed(dataView, offset) {
@@ -106,6 +113,8 @@ const masks = {
     DELTAS_ARE_ZERO: 0x80,
     DELTAS_ARE_WORDS: 0x40,
     DELTA_RUN_COUNT_MASK: 0x3F,
+    INNER_INDEX_BIT_COUNT_MASK: 0x0F,
+    MAP_ENTRY_SIZE_MASK: 0x30,
 };
 
 // A stateful parser that changes the offset whenever a value is retrieved.
@@ -165,6 +174,12 @@ Parser.prototype.parseULong = function() {
     return v;
 };
 
+Parser.prototype.parseLong = function() {
+    const v = getLong(this.data, this.offset + this.relativeOffset);
+    this.relativeOffset += 4;
+    return v;
+};
+
 Parser.prototype.parseOffset32 = Parser.prototype.parseULong;
 
 Parser.prototype.parseFixed = function() {
@@ -713,24 +728,89 @@ Parser.prototype.parseItemVariationSubtable = function() {
     const itemCount = this.parseUShort();
     const wordDeltaCount = this.parseUShort();
 
+    const regionIndexes = this.parseUShortList();
+    const regionIndexCount = regionIndexes.length;
+    
     const subtable = {
-        regionIndexes: this.parseUShortList(),
-        deltaSets: this.parseDeltaSets(itemCount, wordDeltaCount)
+        regionIndexes,
+        deltaSets: itemCount && regionIndexCount ? this.parseDeltaSets(itemCount, wordDeltaCount, regionIndexCount) : []
     };
 
     return subtable;
 };
 
-Parser.prototype.parseDeltaSets = function(itemCount, wordDeltaCount) {
-    const deltas = [];
+Parser.prototype.parseDeltaSetIndexMap = function() {
+    const format = this.parseByte();
+    const entryFormat = this.parseByte();
+    const map = [];
+    let mapCount = 0;
+    
+    switch(format) {
+        case 0:
+            mapCount = this.parseUShort();
+            break;
+        case 1:
+            mapCount = this.parseULong();
+            break;
+        default:
+            console.error(`unsupported DeltaSetIndexMap format ${format}`);
+    }
+
+    if(!mapCount) return {
+        format,
+        entryFormat
+    };
+    
+    const bitCount = (entryFormat & masks.INNER_INDEX_BIT_COUNT_MASK) + 1;
+    const entrySize = ((entryFormat & masks.MAP_ENTRY_SIZE_MASK) >> 4) + 1;
+
+    for (let n = 0; n < mapCount; n++) {
+        let entry;
+        if (entrySize === 1) {
+            entry = this.parseByte();
+        } else if (entrySize === 2) {
+            entry = this.parseUShort();
+        } else if (entrySize === 3) {
+            entry = this.parseUInt24();
+        } else if (entrySize === 4) {
+            entry = this.getULong();
+        } else {
+            throw new Error(`Invalid entry size of ${entrySize}`);
+        }
+    
+        const outerIndex = entry >> bitCount;
+        const innerIndex = entry & ((1 << bitCount) - 1);
+        map.push({ outerIndex, innerIndex });
+    }
+
+    return {
+        format,
+        entryFormat,
+        map,
+    };
+};
+
+Parser.prototype.parseDeltaSets = function(itemCount, wordDeltaCount, regionIndexCount) {
+    const deltas = Array.from({length: itemCount},()=>[]); // two-dimensional array with empty rows and columns
+
     const longFlag = wordDeltaCount & masks.LONG_WORDS;
     const wordCount = wordDeltaCount & masks.WORD_DELTA_COUNT_MASK;
 
-    const wordParser = (longFlag ? this.parseULong : this.parseUShort).bind(this);
-    const restParser = (longFlag ? this.parseUShort : this.parseByte).bind(this);
-    for( let i = 0; i < itemCount; i++ ) {
-        const deltaParser = i < wordCount ? wordParser : restParser;
-        deltas.push(deltaParser());
+    if(wordCount > regionIndexCount) {
+        throw Error('wordCount must be less than or equal to regionIndexCount');
+    }
+    
+    const wordParser = (longFlag ? this.parseLong : this.parseShort).bind(this);
+    const restParser = (longFlag ? this.parseShort : this.parseChar).bind(this);
+    
+    for (let i = 0; i < itemCount; i++) {
+        for (let j = 0; j < regionIndexCount; j++) {
+            if (j < wordCount) {
+                deltas[i].push(wordParser());
+            } else {
+                deltas[i].push(restParser());
+            }
+        }
     }
 
     return deltas;
@@ -799,7 +879,7 @@ Parser.prototype.parseTupleVariationStore = function(tableOffset, axisCount, fla
         this.relativeOffset = tableOffset + dataOffset;
     }    
 
-    if (flavor === 'gvar' && hasSharedPoints) {
+    if (hasSharedPoints) {
         sharedPoints = this.parsePackedPointNumbers();
     }
 
@@ -817,6 +897,7 @@ Parser.prototype.parseTupleVariationStore = function(tableOffset, axisCount, fla
         if(header.flags.privatePointNumbers) {
             header.privatePoints = this.parsePackedPointNumbers();
         }
+        delete header.flags; // we don't need to expose this
         
         const deltasOffset = this.offset;
         const deltasRelativeOffset = this.relativeOffset;
@@ -826,9 +907,10 @@ Parser.prototype.parseTupleVariationStore = function(tableOffset, axisCount, fla
             let _deltasY = undefined;
 
             const parseDeltas = () => {
-                let pointsCount = header.privatePoints.length || sharedPoints.length;
-                if(!pointsCount) {
-                    if(flavor === 'gvar') {
+                let pointsCount = 0;
+                if(flavor === 'gvar') {
+                    pointsCount = header.privatePoints.length || sharedPoints.length;
+                    if(!pointsCount) {
                         const glyph = glyphs.get(glyphIndex);
                         // make sure the path is available
                         glyph.path;
@@ -837,9 +919,9 @@ Parser.prototype.parseTupleVariationStore = function(tableOffset, axisCount, fla
                         // @TODO: actually generate these points from glyph.getBoundingBox() and glyph.getMetrics(),
                         // as they may be influenced by variation as well
                         pointsCount+= 4;
-                    } else if (flavor === 'cvar') {
-                        pointsCount = glyphs.length; // glyphs here is actually font.tables.cvt
                     }
+                } else if (flavor === 'cvar') {
+                    pointsCount = glyphs.length; // glyphs here is actually font.tables.cvt
                 }
                 
                 this.offset = deltasOffset;
@@ -884,9 +966,7 @@ Parser.prototype.parseTupleVariationStore = function(tableOffset, axisCount, fla
         headers,
     };
 
-    if(flavor === 'gvar') {
-        result.sharedPoints = sharedPoints;
-    }
+    result.sharedPoints = sharedPoints;
 
     return result;
 };
diff --git a/src/path.js b/src/path.js
index c6fb022d..545caae8 100644
--- a/src/path.js
+++ b/src/path.js
@@ -42,14 +42,27 @@ function roundDecimal(float, places) {
 function optimizeCommands(commands) {
     // separate subpaths
     let subpaths = [[]];
+    let startX = 0,
+        startY = 0;
     for (let i = 0; i < commands.length; i += 1) {
         const subpath = subpaths[subpaths.length - 1];
         const cmd = commands[i];
         const firstCommand = subpath[0];
         const secondCommand = subpath[1];
         const previousCommand = subpath[subpath.length - 1];
+        const nextCommand = commands[i + 1];
         subpath.push(cmd);
-        if (cmd.type === 'Z') {
+        
+        if (cmd.type === 'M') {
+            startX = cmd.x;
+            startY = cmd.y;
+        } else if (cmd.type === 'L' && (!nextCommand || nextCommand.command === 'Z')) {
+            if(!(Math.abs(cmd.x - startX) > 1 || Math.abs(cmd.y - startY) > 1)) {
+                subpath.pop();
+            }
+        } else if (cmd.type === 'L' && previousCommand && previousCommand.x === cmd.x && previousCommand.y === cmd.y) {
+            subpath.pop();
+        } else if (cmd.type === 'Z') {
             // When closing at the same position as the path started,
             // remove unnecessary line command
             if (
@@ -69,11 +82,6 @@ function optimizeCommands(commands) {
             if (i + 1 < commands.length) {
                 subpaths.push([]);
             }
-        } else if (cmd.type === 'L') {
-            // remove lines that lead to the same position as the previous command
-            if (previousCommand && previousCommand.x === cmd.x && previousCommand.y === cmd.y) {
-                subpath.pop();
-            }
         }
     }
     commands = [].concat.apply([], subpaths); // flatten again
diff --git a/src/tables/cff.js b/src/tables/cff.js
index 334ce92e..e930055f 100755
--- a/src/tables/cff.js
+++ b/src/tables/cff.js
@@ -617,7 +617,7 @@ function applyPaintType(font, path) {
 // Take in charstring code and return a Glyph object.
 // The encoding is described in the Type 2 Charstring Format
 // https://www.microsoft.com/typography/OTSPEC/charstr2.htm
-function parseCFFCharstring(font, glyph, code, version) {
+function parseCFFCharstring(font, glyph, code, version, coords) {
     let c1x;
     let c1y;
     let c2x;
@@ -635,16 +635,25 @@ function parseCFFCharstring(font, glyph, code, version) {
     let nominalWidthX;
     let vsindex = 0;
     let vstore = [];
+    let blendVector;
     const cffTable = font.tables.cff2 || font.tables.cff;
     defaultWidthX = cffTable.topDict._defaultWidthX;
     nominalWidthX = cffTable.topDict._nominalWidthX;
+    coords = coords || font.variation && font.variation.get();
+
+    if (!glyph.getBlendPath) {
+        glyph.getBlendPath = function(variationCoords) {
+            return parseCFFCharstring(font, glyph, code, version, variationCoords);
+        };
+    }
+
     if (font.isCIDFont || version > 1) {
         const fdIndex = cffTable.topDict._fdSelect ? cffTable.topDict._fdSelect[glyph.index] : 0;
         const fdDict = cffTable.topDict._fdArray[fdIndex];
         subrs = fdDict._subrs;
         subrsBias = fdDict._subrsBias;
         if ( version > 1 ) {
-            vstore = cffTable.topDict._vstore.itemVariationStore.itemVariationSubtables;
+            vstore = cffTable.topDict._vstore.itemVariationStore;
             vsindex = fdDict._privateDict.vsindex;
         } else {
             defaultWidthX = fdDict._defaultWidthX;
@@ -931,23 +940,28 @@ function parseCFFCharstring(font, glyph, code, version) {
                         break;
                     }
 
-                    // @TODO: apply actual blend
                     // https://learn.microsoft.com/en-us/typography/opentype/spec/cff2charstr#syntax-for-font-variations-support-operators
                     
-                    var blendStore = vstore[vsindex];
+                    if(!blendVector) {
+                        blendVector = font.variation && coords && font.variation.process.getBlendVector(vstore, vsindex, coords);
+                    }
+                    
                     var n = stack.pop();
-                    var deltaSetCount = n * blendStore.regionIndexes.length;
+                    var axisCount = blendVector ? blendVector.length : vstore.itemVariationSubtables[vsindex].regionIndexes.length;
+                    var deltaSetCount = n * axisCount;
                     var delta = stack.length - deltaSetCount;
                     var deltaSetIndex = delta - n;
       
-                    for (let i = 0; i < n; i++) {
-                        var sum = stack[deltaSetIndex + i];
-                        for (let j = 0; j < n.length; j++) {
-                            sum += 1 * stack[delta++];
+                    if(blendVector) {
+                        for (let i = 0; i < n; i++) {
+                            var sum = stack[deltaSetIndex + i];
+                            for (let j = 0; j < axisCount; j++) {
+                                sum += blendVector[j] * stack[delta++];
+                            }
+                            stack[deltaSetIndex + i] = sum;
                         }
-                        stack[deltaSetIndex + i] = sum;
                     }
-      
+    
                     while (deltaSetCount--) {
                         stack.pop();
                     }
@@ -1130,8 +1144,21 @@ function parseCFFCharstring(font, glyph, code, version) {
     }
 
     parse(code);
+
+    if(font.variation && coords) {
+        // round the point values:  we can't do that directly in the blend operator,
+        // because that might run multiple times and rounding errors might accumulate
+        p.commands = p.commands.map(c => {
+            const keys = Object.keys(c);
+            for(let i = 0; i < keys.length; i++) {
+                const key = keys[i];
+                if(key === 'type') continue;
+                c[key] = Math.round(c[key]);
+            }
+            return c;
+        });
+    }
     
-    // @TODO: check if we need to handle/apply hmtx/HVAR data here or elsewhere, once HVAR is supported
     if (haveWidth) {
         glyph.advanceWidth = width;
     }
diff --git a/src/tables/glyf.js b/src/tables/glyf.js
index dded5951..56edc01e 100644
--- a/src/tables/glyf.js
+++ b/src/tables/glyf.js
@@ -340,3 +340,4 @@ function parseGlyfTable(data, start, loca, font, opt) {
 }
 
 export default { getPath, parse: parseGlyfTable};
+export { getPath, transformPoints };
\ No newline at end of file
diff --git a/src/tables/hvar.js b/src/tables/hvar.js
new file mode 100644
index 00000000..b2f75a76
--- /dev/null
+++ b/src/tables/hvar.js
@@ -0,0 +1,46 @@
+// The `hvar` table stores variation data for the hmtx table.
+// https://learn.microsoft.com/en-us/typography/opentype/spec/hvar
+
+import parse from '../parse.js';
+
+function parseHvarTable(data, start) {
+    const p = new parse.Parser(data, start);
+    const tableVersionMajor = p.parseUShort();
+    const tableVersionMinor = p.parseUShort();
+
+    if (tableVersionMajor !== 1) {
+        console.warn(`Unsupported hvar table version ${tableVersionMajor}.${tableVersionMinor}`);
+    }
+
+    const version = [
+        tableVersionMajor, tableVersionMinor
+    ];
+
+    const itemVariationStore = p.parsePointer32(function() {
+        return this.parseItemVariationStore();
+    });
+    const advanceWidth = p.parsePointer32(function() {
+        return this.parseDeltaSetIndexMap();
+    }); 
+    const lsb = p.parsePointer32(function() {
+        return this.parseDeltaSetIndexMap();
+    }); 
+    const rsb = p.parsePointer32(function() {
+        return this.parseDeltaSetIndexMap();
+    }); 
+    
+    return {
+        version,
+        itemVariationStore,
+        advanceWidth,
+        lsb,
+        rsb,
+    };
+}
+
+function makeHvarTable(/*fvar*/) {
+    console.warn('Writing of hvar tables is not yet supported.');
+}
+
+
+export default { make: makeHvarTable, parse: parseHvarTable };
diff --git a/src/util.js b/src/util.js
index 2ddcc717..8f89a2dd 100644
--- a/src/util.js
+++ b/src/util.js
@@ -136,4 +136,25 @@ function unGzip(gzip) {
     return inflate(gzip.subarray(start, end), new Uint8Array(isize));
 }
 
-export { isBrowser, isNode, checkArgument, arraysEqual, objectsEqual, binarySearch, binarySearchIndex, binarySearchInsert, isGzip, unGzip };
+function copyPoint(p) {
+    return {
+        x: p.x,
+        y: p.y,
+        onCurve: p.onCurve,
+        lastPointOfContour: p.lastPointOfContour,
+    };
+}
+
+function copyComponent(c) {
+    return {
+        glyphIndex: c.glyphIndex,
+        xScale: c.xScale,
+        scale01: c.scale01,
+        scale10: c.scale10,
+        yScale: c.yScale,
+        dx: c.dx,
+        dy: c.dy,
+    };
+}
+
+export { isBrowser, isNode, checkArgument, arraysEqual, objectsEqual, binarySearch, binarySearchIndex, binarySearchInsert, isGzip, unGzip, copyPoint, copyComponent };
diff --git a/src/variation.js b/src/variation.js
new file mode 100644
index 00000000..78859da4
--- /dev/null
+++ b/src/variation.js
@@ -0,0 +1,146 @@
+import { VariationProcessor } from './variationprocessor.js';
+
+export class VariationManager {
+    constructor(font) {
+        this.font = font;
+        this.process = new VariationProcessor(this.font);
+        this.activateDefaultVariation();
+        this.getTransform = this.process.getTransform.bind(this.process);
+    }
+
+    /**
+     * Tries to determine the default instance and sets its variation data as the font.defaultRenderOptions.
+     * If not defaultInstance can be determined, the default coordinates of all axes are used.
+     */
+    activateDefaultVariation() {
+        const defaultInstance = this.getDefaultInstanceIndex();
+        if (defaultInstance > -1) {
+            this.set(defaultInstance);
+        } else {
+            this.set(this.getDefaultCoordinates());
+        }
+    }
+
+    /**
+     * Retrieves the default coordinates for the font's variation axes.
+     * @returns {Object} An object mapping axis tags to their default values.
+     */
+    getDefaultCoordinates() {
+        return this.fvar().axes.reduce((acc, axis) => {
+            acc[axis.tag] = axis.defaultValue;
+            return acc;
+        }, {});
+    }
+
+    /**
+     * Gets the index of the default variation instance or -1 if not able to determine
+     * @returns {integer} default index or -1
+     */
+    getDefaultInstanceIndex() {
+        const defaultCoordinates = this.getDefaultCoordinates();
+        
+        let defaultInstanceIndex = this.getInstanceIndex(defaultCoordinates);
+        
+        if (defaultInstanceIndex < 0) {
+            defaultInstanceIndex = this.fvar().instances.findIndex(instance => instance.name && instance.name.en === 'Regular');
+        }
+
+        return defaultInstanceIndex;
+    }
+
+    /**
+     * Retrieves the index of the variation instance matching the coordinates object or -1 if not able to determine
+     * @param {integer|Object} coordinates An object where keys are axis tags and values are the corresponding variation values.
+     * @returns {integer} The index of the matching instance or -1 if no match is found.
+     */
+    getInstanceIndex(coordinates) {
+        return this.fvar().instances.findIndex(instance =>
+            Object.keys(coordinates).every(axis =>
+                instance.coordinates[axis] === coordinates[axis]
+            )
+        );
+    }
+
+    /**
+     * Retrieves a variation instance by its zero-based index
+     * @param {integer} index - zero-based index of the variation instance
+     * @returns {Object} - variation instance or null if the index is invalid.
+     */
+    getInstance(index) {
+        return this.fvar().instances && this.fvar().instances[index];
+    }
+
+    /**
+     * Set the variation coordinates to use by default for rendering in the font.defaultRenderOptions
+     * @param {integer|Object} instanceIdOrObject Either the zero-based index of a variation instance or an object with axis tags as keys and variation values as values
+     */
+    set(instanceIdOrObject) {
+        let variationData;
+        if(Number.isInteger(instanceIdOrObject)) {
+            const instance = this.getInstance(instanceIdOrObject);
+            if (!instance) {
+                throw Error(`Invalid instance index ${instanceIdOrObject}`);
+            }
+            variationData = {...instance.coordinates};
+        } else {
+            variationData = instanceIdOrObject;
+            this.process.normalizeCoordTags(variationData);
+        }
+        variationData = Object.assign({},
+            this.font.defaultRenderOptions.variation,
+            variationData
+        );
+        this.font.defaultRenderOptions = Object.assign({},
+            this.font.defaultRenderOptions,
+            {variation: variationData}
+        );
+    }
+
+    /**
+     * Returns the variation coordinates currently set in the font.defaultRenderOptions
+     * @returns {Object}
+     */
+    get() {
+        return Object.assign({}, this.font.defaultRenderOptions.variation);
+    }
+
+    /**
+     * Helper method that returns the font's avar table if present
+     * @returns {Object|undefined}
+     */
+    avar() {
+        return this.font.tables.avar;
+    }
+
+    /**
+     * Helper method that returns the font's cvar table if present
+     * @returns {Object|undefined}
+     */
+    cvar() {
+        return this.font.tables.cvar;
+    }
+
+    /**
+     * Helper method that returns the font's fvar table if present
+     * @returns {Object|undefined}
+     */
+    fvar() {
+        return this.font.tables.fvar;
+    }
+
+    /**
+     * Helper method that returns the font's gvar table if present
+     * @returns {Object|undefined}
+     */
+    gvar() {
+        return this.font.tables.gvar;
+    }
+
+    /**
+     * Helper method that returns the font's hvar table if present
+     * @returns {Object|undefined}
+     */
+    hvar() {
+        return this.font.tables.hvar;
+    }
+}
\ No newline at end of file
diff --git a/src/variationprocessor.js b/src/variationprocessor.js
new file mode 100644
index 00000000..f823d3d8
--- /dev/null
+++ b/src/variationprocessor.js
@@ -0,0 +1,586 @@
+import { getPath, transformPoints } from './tables/glyf.js';
+import { copyPoint, copyComponent } from './util.js';
+import Glyph from './glyph.js';
+
+/**
+ * Part of the code of this class was based on
+ * https://github.com/foliojs/fontkit/blob/a5fe0a1834241dbc6eb02beea3b7414c118c5ac9/src/glyph/GlyphVariationProcessor.js
+ * Copyright (c) 2014 Devon Govett
+ * MIT License
+ */
+
+export class VariationProcessor {
+    constructor(font) {
+        this.font = font;
+    }
+
+    /**
+     * Modifies a coords object to make sure that tags have a length of 4
+     * @param {Object} coords - variation coordinates
+     */
+    normalizeCoordTags(coords) {
+        for (const tag in coords) {
+            if(tag.length < 4) {
+                const padded = tag.padEnd(4, ' ');
+                coords[padded] === undefined && (coords[padded] = coords[tag]);
+                delete coords[tag];
+            }
+        }
+    }
+
+    /**
+     * Normalizes the coordinates from the axis ranges to a range of -1 to 1.
+     * @param {Object} coords - The coordinates object to normalize.
+     * @returns {Array<number>} The normalized coordinates as an array
+     */
+    getNormalizedCoords(coords) {
+        if(!coords) {
+            coords = this.font.variation.get();
+        }
+        let normalized = [];
+        this.normalizeCoordTags(coords);
+        for (let i = 0; i < this.fvar().axes.length; i++) {
+            const axis = this.fvar().axes[i];
+            let tagValue = coords[axis.tag];
+            if(tagValue === undefined) {
+                tagValue = axis.defaultValue;
+            }
+            if (tagValue < axis.defaultValue) {
+                normalized.push((tagValue - axis.defaultValue + Number.EPSILON) / (axis.defaultValue - axis.minValue + Number.EPSILON));
+            } else {
+                normalized.push((tagValue - axis.defaultValue + Number.EPSILON) / (axis.maxValue - axis.defaultValue + Number.EPSILON));
+            }
+        }
+
+        // if there is an avar table, the normalized value is calculated
+        // by interpolating between the two nearest mapped values.
+        if (this.avar()) {
+            for (let i = 0; i < this.avar().axisSegmentMaps.length; i++) {
+                let segment = this.avar().axisSegmentMaps[i];
+                for (let j = 0; j < segment.axisValueMaps.length; j++) {
+                    let pair = segment.axisValueMaps[j];
+                    if (j >= 1 && normalized[i] < pair.fromCoordinate) {
+                        let prev = segment.axisValueMaps[j - 1];
+                        normalized[i] = ((normalized[i] - prev.fromCoordinate) * (pair.toCoordinate - prev.toCoordinate) + Number.EPSILON) /
+                            (pair.fromCoordinate - prev.fromCoordinate + Number.EPSILON) +
+                            prev.toCoordinate;
+            
+                        break;
+                    }
+                }
+            }
+        }
+
+        return normalized;
+    }
+
+    /**
+     * Interpolates points within a glyph if deltas are not provided for all points.
+     * @param {Array<Object>} points - The points to be interpolated.
+     * @param {Array<Object>} glyphPoints - Reference points from the glyph.
+     * @param {Object} deltaMap - A map indicating which points have deltas.
+     */
+    interpolatePoints(points, glyphPoints, deltaMap) {
+        if (points.length === 0) {
+            return;
+        }
+    
+        let pointIndex = 0;
+        while (pointIndex < points.length) {
+            let firstPoint = pointIndex;
+    
+            // find the end point of the contour
+            let endPoint = pointIndex;
+            let point = points[endPoint];
+            while (!point.lastPointOfContour) {
+                point = points[++endPoint];
+            }
+    
+            // find the first point that has a delta
+            while (pointIndex <= endPoint && !deltaMap[pointIndex]) {
+                pointIndex++;
+            }
+    
+            if (pointIndex > endPoint) {
+                continue;
+            }
+    
+            let firstDelta = pointIndex;
+            let curDelta = pointIndex;
+            pointIndex++;
+    
+            while (pointIndex <= endPoint) {
+                // find the next point with a delta, and interpolate intermediate points
+                if (deltaMap[pointIndex]) {
+                    this.deltaInterpolate(curDelta + 1, pointIndex - 1, curDelta, pointIndex, glyphPoints, points);
+                    curDelta = pointIndex;
+                }
+        
+                pointIndex++;
+            }
+    
+            // shift contour if we only have a single delta
+            if (curDelta === firstDelta) {
+                this.deltaShift(firstPoint, endPoint, curDelta, glyphPoints, points);
+            } else {
+                // otherwise, handle the remaining points at the end and beginning of the contour
+                this.deltaInterpolate(curDelta + 1, endPoint, curDelta, firstDelta, glyphPoints, points);
+        
+                if (firstDelta > 0) {
+                    this.deltaInterpolate(firstPoint, firstDelta - 1, curDelta, firstDelta, glyphPoints, points);
+                }
+            }
+    
+            pointIndex = endPoint + 1;
+        }
+    }
+
+    /**
+     * Interpolates delta values between two points.
+     * @param {number} p1 - Start point index for interpolation.
+     * @param {number} p2 - End point index for interpolation.
+     * @param {number} ref1 - Reference point index for the start delta.
+     * @param {number} ref2 - Reference point index for the end delta.
+     * @param {Array<Object>} glyphPoints - Reference points from the glyph.
+     * @param {Array<Object>} points - The points to be adjusted.
+     */
+    deltaInterpolate(p1, p2, ref1, ref2, glyphPoints, points) {
+        if (p1 > p2) {
+            return;
+        }
+
+        let iterable = ['x', 'y'];
+        for (let i = 0; i < iterable.length; i++) {
+            let k = iterable[i];
+            if (glyphPoints[ref1][k] > glyphPoints[ref2][k]) {
+                var p = ref1;
+                ref1 = ref2;
+                ref2 = p;
+            }
+
+            let in1 = glyphPoints[ref1][k];
+            let in2 = glyphPoints[ref2][k];
+            let out1 = points[ref1][k];
+            let out2 = points[ref2][k];
+
+            // If the reference points have the same coordinate but different
+            // delta, inferred delta is zero.  Otherwise interpolate.
+            if (in1 !== in2 || out1 === out2) {
+                let scale = in1 === in2 ? 0 : (out2 - out1) / (in2 - in1);
+
+                for (let p = p1; p <= p2; p++) {
+                    let out = glyphPoints[p][k];
+
+                    if (out <= in1) {
+                        out += out1 - in1;
+                    } else if (out >= in2) {
+                        out += out2 - in2;
+                    } else {
+                        out = out1 + (out - in1) * scale;
+                    }
+
+                    points[p][k] = out;
+                }
+            }
+        }
+    }
+
+    /**
+     * Applies a delta shift to a range of points based on a reference point.
+     * @param {number} p1 - Start point index for shifting.
+     * @param {number} p2 - End point index for shifting.
+     * @param {number} ref - Reference point index.
+     * @param {Array<Object>} glyphPoints - Reference points from the glyph.
+     * @param {Array<Object>} points - The points to be shifted.
+     */
+    deltaShift(p1, p2, ref, glyphPoints, points) {
+        let deltaX = points[ref].x - glyphPoints[ref].x;
+        let deltaY = points[ref].y - glyphPoints[ref].y;
+
+        if (deltaX === 0 && deltaY === 0) {
+            return;
+        }
+
+        for (let p = p1; p <= p2; p++) {
+            if (p !== ref) {
+                points[p].x += deltaX;
+                points[p].y += deltaY;
+            }
+        }
+    }
+
+    /**
+     * Transforms glyph components based on variation data.
+     * @param {Glyph} glyph - The composite glyph to transform.
+     * @param {Array<Object>} transformedPoints - Points that are already transformed.
+     * @param {Object} coords - Variation coordinates.
+     * @param {Array<number>} tuplePoints - Points that are part of the tuple.
+     * @param {Object} header - Header information from the variation data.
+     * @param {number} factor - The scaling factor for the transformation.
+     */
+    transformComponents(glyph, transformedPoints, coords, tuplePoints, header, factor) {
+        let pointsIndex = 0;
+        for(let c = 0; c < glyph.components.length; c++) {
+            const component = glyph.components[c];
+            const componentGlyph = this.font.glyphs.get(component.glyphIndex);
+            const componentTransform = copyComponent(component);
+            const deltaIndex = tuplePoints.indexOf(c);
+            if(deltaIndex > -1) {
+                componentTransform.dx += Math.round(header.deltas[deltaIndex] * factor);
+                componentTransform.dy += Math.round(header.deltasY[deltaIndex] * factor);
+            }
+            const transformedComponentPoints = transformPoints(this.getTransform(componentGlyph, coords).points, componentTransform);
+            transformedPoints.splice(pointsIndex, transformedComponentPoints.length, ...transformedComponentPoints);
+            pointsIndex += componentGlyph.points.length;
+        }
+    }
+
+    applyTupleVariationStore(variationData, points, coords, flavor = 'gvar', args = {}) {
+        if(!coords) {
+            coords = this.font.variation.get();
+        }
+        const normalizedCoords = this.getNormalizedCoords(coords);
+        const { headers, sharedPoints } = variationData;
+
+        const axisCount = this.fvar().axes.length;
+
+        let transformedPoints;
+
+        if (flavor === 'gvar') {
+            transformedPoints = points.map(copyPoint);
+        } else if (flavor === 'cvar') {
+            transformedPoints = [...points];
+        }
+
+        for(let h = 0; h < headers.length; h++) {
+            const header = headers[h];
+            let factor = 1;
+            for (let a = 0; a < axisCount; a++) {
+
+                let tupleCoords = [0];
+                switch(flavor) {
+                    case 'gvar':
+                        tupleCoords = header.peakTuple ? header.peakTuple : this.gvar().sharedTuples[header.sharedTupleRecordsIndex];
+                        break;
+                    case 'cvar':
+                        tupleCoords = header.peakTuple;
+                        break;
+                }
+
+                
+                if (tupleCoords[a] === 0) {
+                    continue;
+                }
+                
+                if (normalizedCoords[a] === 0) {
+                    factor = 0;
+                    break;
+                }
+            
+                if (!header.intermediateStartTuple) {
+                    if ((normalizedCoords[a] < Math.min(0, tupleCoords[a])) ||
+                        (normalizedCoords[a] > Math.max(0, tupleCoords[a]))) {
+                        factor = 0;
+                        break;
+                    }
+            
+                    factor = (factor * normalizedCoords[a] + Number.EPSILON) / (tupleCoords[a] + Number.EPSILON);
+                } else {
+                    if ((normalizedCoords[a] < header.intermediateStartTuple[a]) || (normalizedCoords[a] > header.intermediateEndTuple[a])) {
+                        factor = 0;
+                        break;
+                    } else if (normalizedCoords[a] < tupleCoords[a]) {
+                        factor = factor * (normalizedCoords[a] - header.intermediateStartTuple[a] + Number.EPSILON) / (tupleCoords[a] - header.intermediateStartTuple[a] + Number.EPSILON);
+                    } else {
+                        factor = factor * (header.intermediateEndTuple[a] - normalizedCoords[a] + Number.EPSILON) / (header.intermediateEndTuple[a] - tupleCoords[a] + Number.EPSILON);
+                    }
+                }
+            }
+
+            if (factor === 0) {
+                continue;
+            }
+
+            const tuplePoints = header.privatePoints.length ? header.privatePoints: sharedPoints;
+
+            if(flavor === 'gvar' && args.glyph && args.glyph.isComposite) {
+                /** @TODO: composite glyphs that are not explicitly targeted in the gvar table
+                 ** will not be transformed. It's unclear whether this is the desired behaviour or not,
+                ** @see https://github.com/unicode-org/text-rendering-tests/issues/96
+                */
+                this.transformComponents(args.glyph, transformedPoints, coords, tuplePoints, header, factor);
+            } else if (tuplePoints.length === 0) {
+                for (let i = 0; i < transformedPoints.length; i++) {
+                    const point = transformedPoints[i];
+                    if(flavor === 'gvar') {
+                        transformedPoints[i] = {
+                            x: Math.round(point.x + header.deltas[i] * factor),
+                            y: Math.round(point.y + header.deltasY[i] * factor),
+                            onCurve: point.onCurve,
+                            lastPointOfContour: point.lastPointOfContour
+                        };
+                    } else if (flavor === 'cvar') {
+                        transformedPoints[i] = Math.round(point + header.deltas[i] * factor);
+                    }
+                }
+            } else {
+                let interpolatedPoints;
+                if(flavor === 'gvar') {
+                    interpolatedPoints = transformedPoints.map(copyPoint);
+                } else if (flavor === 'cvar') {
+                    interpolatedPoints = transformedPoints;
+                }
+                const deltaMap = Array(points.length).fill(false);
+                for (let i = 0; i < tuplePoints.length; i++) {
+                    let pointIndex = tuplePoints[i];
+                    if (pointIndex < points.length) {
+                        let point = interpolatedPoints[pointIndex];
+                        if(flavor === 'gvar') {
+                            deltaMap[pointIndex] = true;
+                            point.x += header.deltas[i] * factor;
+                            point.y += header.deltasY[i] * factor;
+                        } else if (flavor === 'cvar') {
+                            transformedPoints[pointIndex] = Math.round(point + header.deltas[i] * factor);
+                        }
+                    }
+                }
+
+                if(flavor === 'gvar') {
+                    this.interpolatePoints(interpolatedPoints, transformedPoints, deltaMap);
+    
+                    for (let i = 0; i < points.length; i++) {
+                        let deltaX = interpolatedPoints[i].x - transformedPoints[i].x;
+                        let deltaY = interpolatedPoints[i].y - transformedPoints[i].y;
+    
+                        transformedPoints[i].x = Math.round(transformedPoints[i].x + deltaX);
+                        transformedPoints[i].y = Math.round(transformedPoints[i].y + deltaY);
+                    }
+                }
+            }
+        }
+        
+        return transformedPoints;
+    }
+
+    
+    /**
+     * Retrieves a transformed copy of a glyph based on the provided variation coordinates, or the glyph itself if no variation was applied
+     * @param {opentype.Glyph|number} glyph - Glyph or index of glyph to transform.
+     * @param {Object} coords - Variation coords object (will fall back to variation coords in the defaultRenderOptions)
+     * @returns {opentype.Glyph} - The transformed glyph.
+     */
+    getTransform(glyph, coords) {
+        if(Number.isInteger(glyph)) {
+            glyph = this.font.glyphs.get(glyph);
+        }
+        const hasBlend = glyph.getBlendPath;
+        const hasPoints = !!(glyph.points && glyph.points.length);
+        let transformedGlyph = glyph;
+        if (hasBlend || hasPoints) {
+            if(!coords) {
+                coords = this.font.variation.get();
+            }
+            if(hasPoints) {
+                const variationData = this.gvar() && this.gvar().glyphVariations[glyph.index];
+
+                if(variationData) {
+                    const glyphPoints = glyph.points;
+                    let transformedPoints = this.applyTupleVariationStore(variationData, glyphPoints, coords, 'gvar', { glyph });
+                    transformedGlyph = new Glyph(Object.assign({}, glyph, {points: transformedPoints, path: getPath(transformedPoints)}));
+                }
+            } else if (hasBlend) {
+                const blendPath = glyph.getBlendPath(coords);
+                transformedGlyph = new Glyph(Object.assign({}, glyph, {path: blendPath}));
+            }
+        }
+
+        if(this.font.tables.hvar) {
+            glyph._advanceWidth = typeof glyph._advanceWidth !== 'undefined' ? glyph._advanceWidth: glyph.advanceWidth;
+            glyph.advanceWidth = transformedGlyph.advanceWidth = Math.round(glyph._advanceWidth + this.getVariableAdjustment(transformedGlyph.index, 'hvar', 'advanceWidth', coords));
+            
+            glyph._leftSideBearing = typeof glyph._leftSideBearing !== 'undefined' ? glyph._leftSideBearing: glyph.leftSideBearing;
+            glyph.leftSideBearing = transformedGlyph.leftSideBearing = Math.round(glyph._leftSideBearing + this.getVariableAdjustment(transformedGlyph.index, 'hvar', 'lsb', coords));
+        }
+
+        return transformedGlyph;
+    }
+
+    getCvarTransform(coords) {
+        const cvt = this.font.tables.cvt;
+        const variationData = this.cvar();
+        if(!cvt || !cvt.length || !variationData || !variationData.headers.length) return cvt;
+        return this.applyTupleVariationStore(variationData, cvt, coords, 'cvar');
+    }
+
+    /**
+     * Calculates the variable adjustment for a glyph property from variation data.
+     * @param {number} gid - Glyph ID.
+     * @param {string} tableName - The name of the variation data table.
+     * @param {string} parameter - The property to adjust.
+     * @param {Object} coords - Variation coordinates.
+     * @returns {number} - The calculated adjustment.
+     */
+    getVariableAdjustment(gid, tableName, parameter, coords) {
+        coords = coords || this.font.variation.get();
+
+        let outerIndex, innerIndex;
+        
+        const table = this.font.tables[tableName];
+        if(!table) {
+            throw Error(`trying to get variation adjustment from non-existent table "${table}"`);
+        }
+        if(!table.itemVariationStore) {
+            throw Error(`trying to get variation adjustment from table "${table}" which does not have an itemVariationStore`);
+        }
+        const mapSize = table[parameter] && table[parameter].map.length;
+        if (mapSize) {
+            let i = gid;
+            if (i >= mapSize) {
+                i = mapSize - 1;
+            }
+            
+            ({outerIndex, innerIndex} = table[parameter].map[i]);
+        } else {
+            outerIndex = 0;
+            innerIndex = gid;
+        }
+    
+        return this.getDelta(table.itemVariationStore, outerIndex, innerIndex, coords);
+
+    }
+
+    /**
+     * Retrieves the delta value from a variation store.
+     * @param {Object} itemStore - The item variation store.
+     * @param {number} outerIndex - The outer index in the variation subtables.
+     * @param {number} innerIndex - The inner index in the delta sets.
+     * @param {Object} coords - Variation coordinates.
+     * @returns {number} - The delta value.
+     */
+    getDelta(itemStore, outerIndex, innerIndex, coords) {
+        if (outerIndex >= itemStore.itemVariationSubtables.length) {
+            return 0;
+        }
+        
+        let varData = itemStore.itemVariationSubtables[outerIndex];
+        if (innerIndex >= varData.deltaSets.length) {
+            return 0;
+        }
+        
+        let deltaSet = varData.deltaSets[innerIndex];
+        let blendVector = this.getBlendVector(itemStore, outerIndex, coords);
+        let netAdjustment = 0;
+    
+        for (let master = 0; master < varData.regionIndexes.length; master++) {
+            netAdjustment += deltaSet[master] * blendVector[master];
+        }
+    
+        return netAdjustment;
+    }
+
+    /**
+     * Calculates the blend vector for a set of variation coordinates.
+     * @param {Object} itemStore - The item variation store.
+     * @param {number} itemIndex - Index of the current item in the variation subtables.
+     * @param {Object} coords - Variation coordinates.
+     * @returns {Array<number>} - The blend vector for the given coordinates.
+     */
+    getBlendVector(itemStore, itemIndex, coords) {
+        if(!coords) {
+            coords = this.font.variation.get();
+        }
+        let varData = itemStore.itemVariationSubtables[itemIndex];
+
+        const normalizedCoords = this.getNormalizedCoords(coords);
+        let blendVector = [];
+    
+        // outer loop steps through master designs to be blended
+        for (let master = 0; master < varData.regionIndexes.length; master++) {
+            let scalar = 1;
+            let regionIndex = varData.regionIndexes[master];
+            let axes = itemStore.variationRegions[regionIndex].regionAxes;
+    
+            // inner loop steps through axes in this region
+            for (let j = 0; j < axes.length; j++) {
+                let axis = axes[j];
+                let axisScalar;
+    
+                // compute the scalar contribution of this axis
+                // ignore invalid ranges
+                if (axis.startCoord > axis.peakCoord || axis.peakCoord > axis.endCoord) {
+                    axisScalar = 1;
+    
+                } else if (axis.startCoord < 0 && axis.endCoord > 0 && axis.peakCoord !== 0) {
+                    axisScalar = 1;
+    
+                    // peak of 0 means ignore this axis
+                } else if (axis.peakCoord === 0) {
+                    axisScalar = 1;
+    
+                    // ignore this region if coords are out of range
+                } else if (normalizedCoords[j] < axis.startCoord || normalizedCoords[j] > axis.endCoord) {
+                    axisScalar = 0;
+    
+                    // calculate a proportional factor
+                } else {
+                    if (normalizedCoords[j] === axis.peakCoord) {
+                        axisScalar = 1;
+                    } else if (normalizedCoords[j] < axis.peakCoord) {
+                        axisScalar = (normalizedCoords[j] - axis.startCoord + Number.EPSILON) /
+                  (axis.peakCoord - axis.startCoord + Number.EPSILON);
+                    } else {
+                        axisScalar = (axis.endCoord - normalizedCoords[j] + Number.EPSILON) /
+                  (axis.endCoord - axis.peakCoord + Number.EPSILON);
+                    }
+                }
+    
+                // take product of all the axis scalars
+                scalar *= axisScalar;
+            }
+    
+            blendVector[master] = scalar;
+        }
+    
+        return blendVector;
+    }
+
+    /**
+     * Helper method that returns the font's avar table if present
+     * @returns {Object|undefined}
+     */
+    avar() {
+        return this.font.tables.avar;
+    }
+
+    /**
+     * Helper method that returns the font's cvar table if present
+     * @returns {Object|undefined}
+     */
+    cvar() {
+        return this.font.tables.cvar;
+    }
+
+    /**
+     * Helper method that returns the font's fvar table if present
+     * @returns {Object|undefined}
+     */
+    fvar() {
+        return this.font.tables.fvar;
+    }
+
+    /**
+     * Helper method that returns the font's gvar table if present
+     * @returns {Object|undefined}
+     */
+    gvar() {
+        return this.font.tables.gvar;
+    }
+
+    /**
+     * Helper method that returns the font's hvar table if present
+     * @returns {Object|undefined}
+     */
+    hvar() {
+        return this.font.tables.hvar;
+    }
+}
\ No newline at end of file
diff --git a/test/fonts/LICENSE b/test/fonts/LICENSE
index 7282c3b0..2c472569 100644
--- a/test/fonts/LICENSE
+++ b/test/fonts/LICENSE
@@ -6,7 +6,7 @@ AbrilFatface-Regular.otf
 CFF1SingleLinePaintTypeTEST.otf
     Copyright (c) 2023, Constantin Groß, https://www.48design.com
     SIL Open Font License, Version 1.1
-    https://opensource.org/licenses/OFL-1.1    
+    https://opensource.org/licenses/OFL-1.1
     
 Changa-Regular.ttf
 Changa-VariableFont_wght.ttf
@@ -57,6 +57,11 @@ SourceSansPro-Regular.otf
     SIL Open Font License, Version 1.1
     https://www.fontsquirrel.com/license/source-sans-pro
 
+TestAVAR.ttf
+    Copyright (c) 2016 by Unicode, Inc.
+    SIL Open Font License version 1.1 (OFL-1.1)
+    https://opensource.org/licenses/OFL-1.1
+
 TestCMAP13.otf
     Copyright 2023 Unicode Inc. All rights reserved.
     SIL Open Font License version 1.1 (OFL-1.1)
@@ -94,6 +99,21 @@ TestGVAR-Composite-0-Missing.ttf
     This subset of the Normschrift font is licensed under https://creativecommons.org/publicdomain/zero/1.0/deed.en.
     The full Normschrift font is copyright 2017 by Jens Kutilek.
 
+
+TestHVAR.ttf
+    Copyright © 2017 by Unicode, Inc.
+    SIL Open Font License
+    http://scripts.sil.org/OFL    
+
+TestHVARTwo.ttf
+    Copyright (c) 2017 by Unicode, Inc.
+    SIL Open Font License
+    http://scripts.sil.org/OFL
+
+TestRVRN-CFF2.otf
+    © 2020 Unicode, Inc.
+    SIL Open Font License, Version 1.1
+
 TestSVGgradientTransform.otf
 TestSVGgzip.otf
 TestSVGmultiGlyphs.otf
@@ -105,3 +125,9 @@ Vibur.woff
     Copyright (c) 2010, Johan Kallas (johan.kallas@gmail.com).
     SIL Open Font License, Version 1.1
     https://www.fontsquirrel.com/license/vibur
+
+Zycon.ttf
+    Copyright (c)1993-2016 by The Font Bureau, Inc. with Reserved Font Name "Zycon"
+    SIL Open Font License, Version 1.1
+    https://opensource.org/licenses/OFL-1.1
+
diff --git a/test/fonts/TestAVAR.ttf b/test/fonts/TestAVAR.ttf
new file mode 100644
index 00000000..4a16594e
Binary files /dev/null and b/test/fonts/TestAVAR.ttf differ
diff --git a/test/fonts/TestHVAROne.otf b/test/fonts/TestHVAROne.otf
new file mode 100644
index 00000000..07a3c544
Binary files /dev/null and b/test/fonts/TestHVAROne.otf differ
diff --git a/test/fonts/TestHVARTwo.ttf b/test/fonts/TestHVARTwo.ttf
new file mode 100644
index 00000000..2e81f94c
Binary files /dev/null and b/test/fonts/TestHVARTwo.ttf differ
diff --git a/test/fonts/TestRVRN-CFF2.otf b/test/fonts/TestRVRN-CFF2.otf
new file mode 100644
index 00000000..7d24fc2c
Binary files /dev/null and b/test/fonts/TestRVRN-CFF2.otf differ
diff --git a/test/fonts/Zycon.ttf b/test/fonts/Zycon.ttf
new file mode 100644
index 00000000..3a6761b8
Binary files /dev/null and b/test/fonts/Zycon.ttf differ
diff --git a/test/parse.js b/test/parse.js
index f3ff58de..65fef720 100644
--- a/test/parse.js
+++ b/test/parse.js
@@ -3,6 +3,14 @@ import { unhex } from './testutil.js';
 import { Parser } from '../src/parse.js';
 
 describe('parse.js', function() {
+    // interpret hex as signed integer
+    const signed = hex => {
+        const bitLength = hex.toString(16).length * 4;
+        const mask = 1 << (bitLength - 1);
+        const maxUnsigned = (1 << bitLength) - 1;
+        return (hex & mask) ? -(~hex & maxUnsigned) - 1 : hex;
+    };    
+
     describe('parseUShortList', function() {
         it('can parse an empty list', function() {
             const p = new Parser(unhex('0000'), 0);
@@ -240,20 +248,36 @@ describe('parse.js', function() {
 
     describe('parseDeltaSets', function() {
         it('should parse DeltaSets without the LONG_WORDS flag', function() {
-            const data = '0123 4567 891A BCDE FADE C0FF EEEE';
+            const data = '0123 4567 891A BCDE FADE C0FF EE0F DEAD BEEF BADA 55DE CADE';
             const p = new Parser(unhex(data), 0);
-            assert.deepEqual(p.parseDeltaSets(4, 0x0000), [ 0x01, 0x23, 0x45, 0x67 ]);
-            assert.deepEqual(p.parseDeltaSets(3, 0x0001), [ 0x891A, 0xBC, 0xDE ]);
-            assert.deepEqual(p.parseDeltaSets(3, 0x0002), [ 0xFADE, 0xC0FF, 0xEE]);
+            assert.deepEqual(p.parseDeltaSets(4, 0x0000, 2), [
+                [0x01, 0x23], [0x45, 0x67], [0x89, 0x1A], [0xBC, 0xDE]
+            ].map(x => x.map(signed)));
+            assert.deepEqual(p.parseDeltaSets(4, 0x0001, 3), [
+                [0xFADE, 0xC0, 0xFF], [0xEE0F, 0xDE, 0xAD],
+                [0xBEEF, 0xBA, 0xDA], [0x55DE, 0xCA, 0xDE]
+            ].map(x => x.map(signed)));
+            p.relativeOffset = 0;
+            assert.deepEqual(p.parseDeltaSets(4, 0x0002, 4), [
+                [0x0123, 0x4567, 0x89, 0x1A], [0xBCDE, 0xFADE, 0xC0, 0xFF],
+                [0xEE0F, 0xDEAD, 0xBE, 0xEF], [0xBADA, 0x55DE, 0xCA, 0xDE],
+            ].map(x => x.map(signed)));
         });
 
         it('should parse DeltaSets with the LONG_WORDS flag', function() {
-            const data = '0123 4567 891A BCDE FADE C0FF EEEE BA5E';
+            const data = '0123 4567 891A BCDE FADE C0FF EEEE BA5E DEAD BEEF DEFA CE0F BADA 55E5 0011 2233 2211 2233 2211';
             const p = new Parser(unhex(data), 0);
-            assert.deepEqual(p.parseDeltaSets(4, 0x8000), [ 0x0123, 0x4567, 0x891A, 0xBCDE ]);
-            assert.deepEqual(p.parseDeltaSets(3, 0x8001), [ 0xFADEC0FF, 0xEEEE, 0xBA5E ]);
-            p.relativeOffset = 8;
-            assert.deepEqual(p.parseDeltaSets(2, 0x8002), [ 0xFADEC0FF, 0xEEEEBA5E ]);
+            assert.deepEqual(p.parseDeltaSets(4, 0x8000, 2), [
+                [0x0123, 0x4567], [0x891A, 0xBCDE], [0xFADE, 0xC0FF], [0xEEEE, 0xBA5E]
+            ].map(x => x.map(signed)));
+            p.relativeOffset = 0;
+            assert.deepEqual(p.parseDeltaSets(1, 0x8001, 3), [
+                [0x01234567, 0x891A, 0xBCDE ],
+            ].map(x => x.map(signed)));
+            p.relativeOffset = 28;
+            assert.deepEqual(p.parseDeltaSets(1, 0x8002, 3), [
+                [0x00112233, 0x22112233, 0x2211],
+            ].map(x => x.map(signed)));
         });
     });
 
diff --git a/test/tables/cff.js b/test/tables/cff.js
index b55f0f01..642b2231 100644
--- a/test/tables/cff.js
+++ b/test/tables/cff.js
@@ -71,7 +71,7 @@ describe('tables/cff.js', function () {
             '17 0C 0C DB 95 57 F7 02 85 8B 8D 17 0C 0D F7 06 ' +
             '13 00 00 00 01 01 01 1B BD BD EF 8C 10 8B 15 F8 ' +
             '88 27 FB 5C 8C 10 06 F8 88 07 FC 88 EF F7 5C 8C ' +
-            '10 06'; // '10 06';
+            '10 06';
         const font = {
             encoding: 'cmap_encoding',
             tables: {maxp: {version: 0.5, numGlyphs: 2}}
@@ -163,7 +163,7 @@ describe('tables/cff.js', function () {
         assert.equal(path.fill, null);
         assert.equal(path.stroke, 'black');
         assert.equal(path.strokeWidth, 0.6);
-        const svg1 = '<path d="M5.44-9.45C4.61-8.12 2.05-9.23 2.05-9.23M4.01-8.80C3.50-3.57 7.36 2.11 5.24-0.27C3.32-2.43 0.34-3.38 0.34-3.38M7.58-2.39L6.47-6.41L10.21-9.33L14.60-7.54L15.25-2.84L11.98-0.60L7.58-2.39" fill="none" stroke="black" stroke-width="0.6"/>';
+        const svg1 = '<path d="M5.44-9.45C4.61-8.12 2.05-9.23 2.05-9.23M4.01-8.80C3.50-3.57 7.36 2.11 5.24-0.27C3.32-2.43 0.34-3.38 0.34-3.38M7.58-2.39L6.47-6.41L10.21-9.33L14.60-7.54L15.25-2.84L11.98-0.60" fill="none" stroke="black" stroke-width="0.6"/>';
         assert.equal(path.toSVG(),svg1);
         font.tables.cff.topDict.paintType = 0;
         // redraw
@@ -172,7 +172,47 @@ describe('tables/cff.js', function () {
         assert.equal(path.fill, 'black');
         assert.equal(path.stroke, null);
         assert.equal(path.strokeWidth, 1);
-        const svg2 = '<path d="M5.44-9.45C4.61-8.12 2.05-9.23 2.05-9.23M4.01-8.80C3.50-3.57 7.36 2.11 5.24-0.27C3.32-2.43 0.34-3.38 0.34-3.38M7.58-2.39L6.47-6.41L10.21-9.33L14.60-7.54L15.25-2.84L11.98-0.60L7.58-2.39"/>';
+        const svg2 = '<path d="M5.44-9.45C4.61-8.12 2.05-9.23 2.05-9.23M4.01-8.80C3.50-3.57 7.36 2.11 5.24-0.27C3.32-2.43 0.34-3.38 0.34-3.38M7.58-2.39L6.47-6.41L10.21-9.33L14.60-7.54L15.25-2.84L11.98-0.60"/>';
         assert.equal(path.toSVG(), svg2);
     });
+
+    it('correctly transforms CFF2 variable font glyphs using blend operations', function() {
+        const font = loadSync('./test/fonts/TestRVRN-CFF2.otf');
+        const untransformedPoints = [
+            200,700,200,100,800,100,800,700,250,150,250,650,750,650,750,150,417,254,417,240,579,
+            240,579,254,508,254,508,560,495,560,436,541,436,530,493,530,493,254
+        ];
+        const transformedPoints = [
+            200,700,200,100,800,100,800,700,275,175,275,625,725,625,725,175,395,310,395,241,606,
+            241,606,310,549,310,549,558,486,558,403,527,403,474,463,474,463,310
+        ];
+        assert.deepEqual(
+            font.glyphs.get(1).path.commands
+                .filter(c => c.type !== 'Z')
+                .map(c => [c.x, c.y]).flat(),
+            untransformedPoints
+        );
+        assert.deepEqual(
+            font.variation.getTransform(1).path.commands
+                .filter(c => c.type !== 'Z')
+                .map(c => [c.x, c.y])
+                .flat(),
+            untransformedPoints
+        );
+        assert.deepEqual(
+            font.variation.getTransform(1, {wght: 900, opsz: 10}).path.commands
+                .filter(c => c.type !== 'Z')
+                .map(c => [c.x, c.y])
+                .flat(),
+            transformedPoints
+        );
+        font.variation.set({wght: 900, opsz: 10});
+        assert.deepEqual(
+            font.variation.getTransform(font.glyphs.get(1)).path.commands
+                .filter(c => c.type !== 'Z')
+                .map(c => [c.x, c.y])
+                .flat(),
+            transformedPoints
+        );
+    });
 });
diff --git a/test/tables/cvar.js b/test/tables/cvar.js
index 9f789afb..ab32428a 100644
--- a/test/tables/cvar.js
+++ b/test/tables/cvar.js
@@ -1,10 +1,9 @@
 import assert from 'assert';
-import { hex, unhex } from '../testutil.js';
 import { parse } from '../../src/opentype.js';
 import { readFileSync } from 'fs';
 const loadSync = (url, opt) => parse(readFileSync(url), opt);
 
-describe('tables/gvar.js', function() {
+describe('tables/cvar.js', function() {
     const fonts = {
         cvarTest1: loadSync('./test/fonts/TestCVARGVAROne.ttf'),
         cvarTest2: loadSync('./test/fonts/TestCVARGVARTwo.ttf'),
@@ -16,29 +15,31 @@ describe('tables/gvar.js', function() {
             assert.deepEqual(font.tables.cvar.version, [1,0]);
             assert.equal(font.tables.cvar.headers.length, 11);
             assert.equal(font.tables.cvar.headers[0].peakTuple.length, font.tables.fvar.axes.length);
+            assert.deepEqual(font.variation.process.getCvarTransform(), font.tables.cvt);
+            assert.deepEqual(font.variation.process.getCvarTransform({wght: 142, wdth: 80, opsz: 36}), 
+                [760, 10, 714, 0, 714, 10, 536, 10, 0, 0, 0, -10, 0, -10, -250, -10]
+                .concat(Array(49).fill(0))
+                .concat([80, 129, 84])
+                .concat(Array(17).fill(0))
+                .concat([38, 0, 61, 0, 0, 0, 0, 0, 33])
+                .concat(Array(26).fill(0))
+            );
         };
-    });
 
-    
-    [1].forEach(n => {
-        const font = fonts[`cvarTest${n}`];
-        assert.deepEqual(font.tables.cvar.headers[10].flags,
-            {embeddedPeakTuple: true, intermediateRegion: false, privatePointNumbers: true});
-        assert.deepEqual(font.tables.cvar.headers.map(h => h.privatePoints),
-            Array(11).fill([65,66,67,85,87,93]));
-        assert.deepEqual(font.tables.cvar.headers.map(h => h.deltas),
-        [
-            [8,-8,8,-11,0,-1], [-2,8,-7,11,0,1], [56,-24,42,6,-10,-4],
-            [-44,-66,-39,-28,-39,-22], [22,100,36,19,36,19], [8,0,8,-43,-49,-32],
-            [-8,0,-8,11,9,1], [-80,0,-90,-6,-47,4], [-16,0,-21,28,39,22],
-            [-46,0,-22,-19,35,-19], [2,0,7,-11,-9,-1]
-        ]);
-    });
-    [2].forEach(n => {
-        const font = fonts[`cvarTest${n}`];
-        assert.deepEqual(font.tables.cvar.headers[10].flags,
-            {embeddedPeakTuple: true, intermediateRegion: false, privatePointNumbers: false});
-        assert.deepEqual(font.tables.cvar.headers.map(h => h.deltas.length),
-            Array(11).fill(font.tables.cvt.length));
+        [1].forEach(n => {
+            const font = fonts[`cvarTest${n}`];
+            assert.deepEqual(font.tables.cvar.headers.map(h => h.privatePoints),
+                Array(11).fill([65,66,67,85,87,93]));
+            assert.deepEqual(font.tables.cvar.headers.map(h => h.deltas.length),
+            Array(11).fill(120));
+        });
+        [2].forEach(n => {
+            const font = fonts[`cvarTest${n}`];
+            assert.deepEqual(font.tables.cvar.sharedPoints, [65, 66, 67, 85, 87, 93]);
+            assert.deepEqual(font.tables.cvar.headers.map(h => h.privatePoints),
+                Array(11).fill([]));
+            assert.deepEqual(font.tables.cvar.headers.map(h => h.deltas.length),
+                Array(11).fill(font.tables.cvt.length));
+        });
     });
 });
\ No newline at end of file
diff --git a/test/tables/gvar.js b/test/tables/gvar.js
index 1a5cf184..b8e44dc9 100644
--- a/test/tables/gvar.js
+++ b/test/tables/gvar.js
@@ -1,5 +1,4 @@
 import assert from 'assert';
-import { hex, unhex } from '../testutil.js';
 import { parse } from '../../src/opentype.js';
 import { readFileSync } from 'fs';
 const loadSync = (url, opt) => parse(readFileSync(url), opt);
@@ -16,6 +15,8 @@ describe('tables/gvar.js', function() {
         // gvarTest9: loadSync('./test/fonts/TestGVARNine.ttf'),
         gvarTestComp: loadSync('./test/fonts/TestGVAR-Composite-0.ttf'),
         gvarTestCompMissing: loadSync('./test/fonts/TestGVAR-Composite-Missing.ttf'),
+        gvarTestCvar1: loadSync('./test/fonts/TestCVARGVAROne.ttf'),
+        gvarTestCvar2: loadSync('./test/fonts/TestCVARGVARTwo.ttf'),
     };
     it('correctly parses the glyph variations table', function() {
         // tests for all fonts
@@ -104,6 +105,52 @@ describe('tables/gvar.js', function() {
             const font = fonts[`gvarTest${n}`];
             assert.deepEqual(font.tables.gvar.sharedTuples, [[-1]]);
         });
+    });
 
+    it('correctly transforms TrueType glyphs', function() {
+        ['Cvar1','Cvar2'].forEach(n => {
+            const font = fonts[`gvarTest${n}`];
+            const untransformedPoints = [
+                287,-10,179,-10,55,128,55,269,55,409,174,546,290,546,398,546,522,409,522,269,522,128,
+                402,-10,289,42,339,42,399,93,425,194,425,269,425,344,398,443,338,493,288,493,238,493,
+                178,443,152,344,152,269,152,194,179,93,239,42
+            ];
+            const transformedPoints = [];
+            assert.deepEqual(font.glyphs.get(4).points.map(p => [p.x, p.y]).flat(), untransformedPoints);
+        });
+    });
+
+    it('correctly transforms composite glyphs', function() {
+        ['Comp'/*,'CompMissing'*/].forEach(n => {
+            const font = fonts[`gvarTest${n}`];
+            const untransformedPathData =
+                'M171 500Q135 500 106.50 483.50Q78 467 62 438.50Q46 410 46 373L46 257' +
+                'Q46 220 62 191.50Q78 163 106.50 146.50Q135 130 171 130Q208 130 236 146.50' +
+                'Q264 163 280 191.50Q296 220 296 257L296 373Q296 410 280 438.50' +
+                'Q264 467 236 483.50Q208 500 171 500ZM171 450Q205 450 225.50 429' +
+                'Q246 408 246 373L246 257Q246 222 225.50 201Q205 180 171 180Q' +
+                '137 180 116.50 201Q96 222 96 257L96 373Q96 408 116.50 429Q137 450 171 450Z' +
+                'M246 65Q236 65 228.50 57.50Q221 50 221 40L221 15Q221 4 228.50-3' +
+                'Q236-10 246-10Q257-10 264-3Q271 4 271 15L271 40Q271 50 264 57.50' +
+                'Q257 65 246 65ZM96 65Q86 65 78.50 57.50Q71 50 71 40L71 15Q71 4 78.50-3' +
+                'Q86-10 96-10Q107-10 114-3Q121 4 121 15L121 40Q121 50 114 57.50Q107 65 96 65Z'
+            assert.equal(font.glyphs.get(6).toPathData(), untransformedPathData);
+            assert.equal(font.glyphs.get(6).toPathData({}, font), untransformedPathData);
+            
+            const transformedPathData =
+                'M146 500Q109 500 82 483Q55 466 43.50 436Q32 406 38 369L57 253' +
+                'Q63 216 83 188.50Q103 161 132.50 145.50Q162 130 197 130Q235 130 261.50 147' +
+                'Q288 164 300 193.50Q312 223 306 261L286 377Q280 413 260.50 441Q' +
+                '241 469 211.50 484.50Q182 500 146 500ZM146 450Q181 450 206.50 428' +
+                'Q232 406 238 369L257 253Q262 219 246 199.50Q230 180 197 180Q162 180 137 202' +
+                'Q112 224 106 261L86 377Q81 411 97 430.50Q113 450 146 450ZM291 65' +
+                'Q280 65 272.50 56Q265 47 267 36L270 12Q271 2 278-4Q285-10 295-10' +
+                'Q306-10 313.50-1Q321 8 319 19L315 43Q314 52 307.50 58.50Q301 65 291 65Z' +
+                'M141 65Q130 65 122.50 56Q115 47 117 36L120 12Q121 2 128-4Q135-10 145-10' +
+                'Q156-10 163.50-1Q171 8 169 19L165 43Q164 52 157.50 58.50Q151 65 141 65Z';
+            assert.equal(font.glyphs.get(6).toPathData({variation: {slnt: -9}}, font), transformedPathData);
+            font.variation.set({slnt: -9});
+            assert.equal(font.glyphs.get(6).toPathData({}, font), transformedPathData);
+        });
     });
 });
\ No newline at end of file
diff --git a/test/variation.js b/test/variation.js
new file mode 100644
index 00000000..f89429ab
--- /dev/null
+++ b/test/variation.js
@@ -0,0 +1,189 @@
+import assert from 'assert';
+import { parse } from '../src/opentype.js';
+import { readFileSync } from 'fs';
+import exp from 'constants';
+const loadSync = (url, opt) => parse(readFileSync(url), opt);
+
+describe('variation.js', function() {
+    const fonts = {
+        avar: loadSync('./test/fonts/TestAVAR.ttf'),
+        hvar: loadSync('./test/fonts/TestHVAROne.otf'),
+        hvar2: loadSync('./test/fonts/TestHVARTwo.ttf'),
+        zycon: loadSync('./test/fonts/Zycon.ttf'),
+        cvar1: loadSync('./test/fonts/TestCVARGVAROne.ttf'),
+        cvar2: loadSync('./test/fonts/TestCVARGVARTwo.ttf'),
+    };
+
+    it('pads axis tags with spaces for lookup', function() {
+        const font = fonts.zycon;
+        const untransformedPoints = [
+            2026, 1022, 2026, 606, 1437, 17, 1021, 17, 605, 17, 16, 606, 16, 1022, 16, 1438, 605, 2027,
+            1021, 2027, 1437, 2027, 2026, 1438, 1976, 1022, 1976, 1418, 1417, 1980, 1021, 1980, 625,
+            1980, 66, 1417, 66, 1021, 66, 625, 625, 64, 1021, 64, 1417, 64, 1976, 626, 1586, 1441,
+            1378, 1482, 1178, 1418, 1297, 1371, 1297, 1371, 1274, 1334, 1274, 1317, 1274, 1274, 1343,
+            1214, 1386, 1214, 1434, 1214, 1494, 1279, 1494, 1326, 1494, 1351, 1474, 1393, 1474, 1393,
+            881, 1416, 681, 1485, 484, 1441, 587, 1394, 587, 1394, 562, 1331, 562, 1315, 562, 1265, 635,
+            1209, 681, 1209, 718, 1209, 785, 1265, 785, 1304, 785, 1317, 770, 1371, 770, 1371, 1245, 868,
+            1245, 868, 1213, 941, 1186, 954, 1159, 967, 1086, 947, 1086, 947, 1027, 1380, 965, 950, 965,
+            950, 881, 969, 853, 955, 825, 941, 794, 861, 794, 861, 919, 888, 919, 888, 997, 839, 1033, 839,
+            1068, 839, 1142, 885, 1142, 885, 1346, 607, 1294, 577, 1100, 544, 1022, 544, 912, 544, 728, 599,
+            698, 614, 727, 529, 914, 422, 1025, 422, 1133, 422, 1321, 546
+        ];
+        const transformedPoints = untransformedPoints.slice(0, 32)
+            .concat([1005, 1980, 983, 1417, 983, 1021, 983, 625, 1005, 64])
+            .concat(untransformedPoints.slice(42));
+        assert.deepEqual(font.variation.getTransform(15).points.map(p => [p.x, p.y]).flat(), untransformedPoints);
+        assert.deepEqual(font.variation.getTransform(15, {M1: 0.48}).points.map(p => [p.x, p.y]).flat(), transformedPoints);
+        
+        font.variation.set({M1: -0.42});
+        assert.deepEqual(font.variation.get(), {
+            'M1  ': -0.42,
+            'M2  ': 0,
+            'T1  ': 0,
+            'T2  ': 0,
+            'T3  ': 0,
+            'T4  ': 0,
+        });
+    });
+
+    describe('avar', function() {
+        it('applies variation limits', function() {
+            const font = fonts.avar;
+            const expectedFactors = [
+                [ -0.9999999999999996 ],
+                [ -0.6666666666666665 ],
+                [ -0.33333333333333315 ]
+            ].concat(Array(9).fill([ 4.440892098500624e-16 ]))
+            .concat([
+                [ 0.20000000000000032 ],
+                [ 0.4000000000000002 ],
+                [ 0.6000000000000003 ],
+                [ 0.8000000000000002 ],
+                [ 1 ]
+            ]);
+            assert.deepEqual(
+                [100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900].map((v) => {
+                    font.variation.set({TEST:v});
+                    return font.variation.process.getNormalizedCoords();
+                }),
+                expectedFactors
+            );
+        });
+    });
+    
+    describe('cvar', function() {
+        it('handles cvar data correctly', function() {
+            
+            ['cvar1','cvar2'].forEach((f) => {
+                let font = fonts[f];
+                let glyphPos = [];
+                assert.equal(
+                    font.forEachGlyph('hon', 0, 0, font.unitsPerEm, {}, function(glyph, gX, gY, gFontSize) {
+                        glyphPos.push({w: glyph.advanceWidth, lsb: glyph.leftSideBearing, gX, count: glyph.path.commands.length});
+                    }),
+                    1857
+                );
+                assert.deepEqual(glyphPos, [
+                    {count: 53, w: 635, lsb: 18, gX: 0},
+                    {count: 32, w: 577, lsb: 55, gX: 635},
+                    {count: 49, w: 645, lsb: 28, gX: 1212},
+                ]);
+                glyphPos = [];
+                font.variation.set({wght: 1000})
+                assert.equal(
+                    font.forEachGlyph('hon', 0, 0, font.unitsPerEm, {}, function(glyph, gX, gY, gFontSize) {
+                        glyphPos.push({w: glyph.advanceWidth, lsb: glyph.leftSideBearing, gX, count: glyph.path.commands.length});
+                    }),
+                    1857
+                );
+                assert.deepEqual(glyphPos, [
+                    {count: 53, w: 635, lsb: 18, gX: 0},
+                    {count: 32, w: 577, lsb: 55, gX: 635},
+                    {count: 49, w: 645, lsb: 28, gX: 1212},
+                ]);
+
+                font = fonts.hvar2;
+                glyphPos = [];
+                assert.equal(
+                    font.forEachGlyph('AB', 0, 0, font.unitsPerEm, {}, function(glyph, gX, gY, gFontSize) {
+                        glyphPos.push({w: glyph.advanceWidth, lsb: glyph.leftSideBearing, gX});
+                    }),
+                    900
+                );
+                assert.deepEqual(glyphPos, [
+                    {w: 450, lsb: 0, gX: 0},
+                    {w: 450, lsb: 0, gX: 450},
+                ]);
+                glyphPos = [];
+                font.variation.set({wght: 1000})
+                assert.equal(
+                    font.forEachGlyph('AB', 0, 0, font.unitsPerEm, {}, function(glyph, gX, gY, gFontSize) {
+                        glyphPos.push({w: glyph.advanceWidth, lsb: glyph.leftSideBearing, gX});
+                    }),
+                    900
+                );
+                assert.deepEqual(glyphPos, [
+                    {w: 450, lsb: 0, gX: 0},
+                    {w: 450, lsb: 0, gX: 450},
+                ]);
+            });
+        });
+    });
+    
+    describe('hvar', function() {
+        it('transforms advanceWidth', function() {
+            let font = fonts.hvar;
+            let glyphPos = [];
+            assert.equal(
+                font.forEachGlyph('ABC', 0, 0, font.unitsPerEm, {}, function(glyph, gX, gY, gFontSize) {
+                    glyphPos.push({w: glyph.advanceWidth, lsb: glyph.leftSideBearing, gX});
+                }),
+                1656
+            );
+            assert.deepEqual(glyphPos, [
+                {w: 520, lsb: 10, gX: 0},
+                {w: 574, lsb: 100, gX: 520},
+                {w: 562, lsb: 56, gX: 1094},
+            ]);
+            glyphPos = [];
+            font.variation.set({wght: 1000})
+            assert.equal(
+                font.forEachGlyph('ABC', 0, 0, font.unitsPerEm, {}, function(glyph, gX, gY, gFontSize) {
+                    glyphPos.push({w: glyph.advanceWidth, lsb: glyph.leftSideBearing, gX});
+                }),
+                1656
+            );
+            assert.deepEqual(glyphPos, [
+                {w: 520, lsb: 10, gX: 0},
+                {w: 574, lsb: 100, gX: 520},
+                {w: 562, lsb: 56, gX: 1094},
+            ]);
+
+            font = fonts.hvar2;
+            glyphPos = [];
+            assert.equal(
+                font.forEachGlyph('AB', 0, 0, font.unitsPerEm, {}, function(glyph, gX, gY, gFontSize) {
+                    glyphPos.push({w: glyph.advanceWidth, lsb: glyph.leftSideBearing, gX});
+                }),
+                900
+            );
+            assert.deepEqual(glyphPos, [
+                {w: 450, lsb: 0, gX: 0},
+                {w: 450, lsb: 0, gX: 450},
+            ]);
+            glyphPos = [];
+            font.variation.set({wght: 1000})
+            assert.equal(
+                font.forEachGlyph('AB', 0, 0, font.unitsPerEm, {}, function(glyph, gX, gY, gFontSize) {
+                    glyphPos.push({w: glyph.advanceWidth, lsb: glyph.leftSideBearing, gX});
+                }),
+                900
+            );
+            assert.deepEqual(glyphPos, [
+                {w: 450, lsb: 0, gX: 0},
+                {w: 450, lsb: 0, gX: 450},
+            ]);
+        });
+    });
+
+});
\ No newline at end of file