index.html

<script src="https://cdn.jsdelivr.net/npm/opentype.js@latest/dist/opentype.min.js"></script>

<script>
  const url_params = new URLSearchParams(window.location.search);

  function download(name, href) {
    const link = document.createElement("a");
    link.download = name;
    link.href = href;
    link.click();
  }

  opentype.load(
    'gveret-levin/font-files/web/GveretLevinAlefAlefAlef-Regular.woff',
    (err, font) => {
      if (err) {
        console.log('Font could not be loaded: ' + err);
        return;
      }

      // The following should work, but doesn't :(
      // const path = font.getPath('0א', 0, 100, 72);
      //
      // Instead, we do:
      // ============================================
      const aleph = font.glyphs.glyphs[7];
      const zero = font.glyphs.glyphs[67];

      const path = new opentype.Path();
      const scale = 1 / font.unitsPerEm * 1000;

      let x = 0;
      const y = 0;
      path.extend(zero.getPath(x, y, 1000))
      x += zero.advanceWidth * scale
      path.extend(aleph.getPath(x, y, 1000))
      // ============================================

      const bb = path.getBoundingBox();
      const stroke_width = 10;
      const start = { x: bb.x1 - stroke_width, y: bb.y1 - stroke_width };
      const width = bb.x2 - bb.x1 + (2 * stroke_width);
      const height = bb.y2 - bb.y1 + (2 * stroke_width);
      const svg_blob = new Blob([
        `<svg xmlns="http://www.w3.org/2000/svg"
              viewBox="${start.x} ${start.y} ${width} ${height}"
              style="stroke: white; stroke-width: ${stroke_width};">`,
        path.toSVG(),
        "</svg>"],
        { type: "image/svg+xml;charset=utf-8" }
      );
      const svg_obj = URL.createObjectURL(svg_blob);

      // Display the generated data.
      const svg_div = document.createElement("div");
      document.body.appendChild(svg_div);
      svg_blob.text().then(text => svg_div.innerHTML += text);

      // Download an SVG Image.
      download("alephzero.svg", svg_obj);

      // Download a PNG Image.
      const png_img = new Image();
      png_img.onload = () => {
        const canvas = document.createElement("canvas");
        canvas.width = width;
        canvas.height = height;
        const context = canvas.getContext("2d");
        context.drawImage(png_img, 0, 0, width, height);

        download("alephzero.png", canvas.toDataURL());
      };
      png_img.src = svg_obj;
    }
  );
</script>