Getting outlines of variable font?

[kai-qu]

trafficstars

Hi! Would it be possible to get the letterform outlines (or key points, or Bezier paths) of a variable font with custom axes, with a particular variable setting, using opentype.js?

Say that I am using AmstelvarAlpha.ttf, and I would like to set the text “Hello” with axes “opsz=11.8, wght=400, grad=100….” (and so on). Is there some way I can get access to the letterforms of the “Hello” as paths or key points?

I see that the live demo handles Amstelvar and can get its outlines fine. I think those are the outlines of Amstelvar with its default settings. However, I wasn't sure how to set a variation of Amstelvar and get those outlines.

I also looked at variableFont.js, which seems to parse the font tables of a variable font, but doesn't offer the outlines.

Any suggestions would be greatly appreciated.

[danmarshall]

I haven't tried it myself, but looking around, I found @devongovett's comment about fontkit which states it supports it. It appears that you can call font.getVariation which

Returns a new font object representing this variation, from which you can get glyphs and perform layout as normal. The variation parameter can either be a variation settings object or a string variation name.

[hyvyys]

fontkit doesn't really work in the browser ;/ Its docs say it supports AAT variation glyphs, which might or might not mean it supports OpenType VFs — didn't have the patience to find out.

[VivaRado]

Get variable font vectors in the browser, fontkit loading variable font. For a demo while working with ThreeJS via WebKit (npm run dev)

import { Buffer } from 'buffer';
var fontkit = require('fontkit');

var fontUrl = '/assets/fonts/AEOBOT-VF.ttf'
fetch(fontUrl).then(res => res.arrayBuffer()).then(fontBlob => {

  const vfont = fontkit.create(new Buffer(fontBlob));

  var v_a = vfont.getVariation({ "wght": 500 });
  var v_b = vfont.getVariation({ "wght": 0 });
  
  var g_a = v_a.layout('B');
  var g_b = v_b.layout('B');
  
  var svg_a = g_a.glyphs[0].path.toSVG();
  var svg_b = g_b.glyphs[0].path.toSVG();

});

[Connum]

Variable font rendering has been implemented via #699, so this is now possible. See the new font.variation API description in the README, especially Font.variation.getTransform() if you want the outlines of a specific glyph.

example:

font.variation.getTransform(2, { test: 0.42 });

This would get the transformed copy of the glyph with index 2, with the axis with the tag test at value 0.42