I have a font that enables the "calt" feature. For example, the text "abcd" is rendered like that (Just a span text on browser with CSS (font-feature-settings: "calt" on;)

But when I use the function forEachGlyph for the text with GlyphRenderOptions like this:
const renderOptions = { script: 'latn', kerning: true, features: { calt: true, liga: true, rlig: true, }, }
I received the results and used them to render on the browser by rendering them in an SVG file with paths, It is not working well like I expected.

Don't worry about the position when I use paths to render because it is for illustration purposes only.
How can I fix it? The font I use is below:
63qdqna4uqehnkm3.woff.zip