Why is text width different whether it's calculated from @pdf-lib/pdfkit or canvas?

[tavoyne]

I noticed a slight difference when measuring text with CanvasRenderingContext2D.measureText() and @pdf-lib/fontkit's Font.layout(). In the exemple below, the difference is very small, but it tends to increase with the size of the text.

import fontkit from "@pdf-lib/fontkit";

const fontFamily = "Inter";
const fontSize = 16;
const text = "Lorem ipsum dolor sit amet";

async function fetchFont(url) {
  const response = await fetch(url);
  const arrayBuffer = await response.arrayBuffer();
  return new Uint8Array(arrayBuffer);
}

const fontBytes = await fetchFont("https://fonts.gstatic.com/s/inter/v11/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hjp-Ek-_EeA.woff");

const fontFace = new FontFace(fontFamily, fontBytes);
window.document.fonts.add(fontFace);
const canvas = window.document.createElement("canvas");
const ctx = canvas.getContext("2d");
ctx.font = `${fontSize}px ${fontFamily}`;
const widthFromCanvas = ctx.measureText(text).width;

const fontkitFont = fontkit.create(fontBytes);
const { advanceWidth } = fontkitFont.layout(text);
const widthFromFontkit = (advanceWidth / fontkitFont.unitsPerEm) * 16;

console.log("Width from canvas:", widthFromCanvas); // Gives 205.38621520996094
console.log("Width from @pdf-lib/fontkit:", widthFromFontkit); // 205.38636363636363

CodeSandbox link

Any idea what can be the reason for this?