Font-family Converter output SVG line animation

I want to achieve such a web effect.
It’s like the animation effect of the text writing path after text input.

Like this.==>codepen

<svg ...>
  <path class="path" stroke="#000000" ... >
</svg>
svg {
  stroke-width:17;
  width:200px;
  height:100px;
  transition:transform .5s ease-out;
  path {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    stroke-width:5;
    animation:summerbird-s .75s linear forwards .5s;
  }
}

And I learned that it is implemented using svg-path and stroke-dashoffset.

Reference documentation1
Reference documentation2

But I still need to convert the font family to svg path. It would be great if there is a better implementation process or a suitable js library to help me.

Hope I can get other thoughts and help.
Thank you very much.