title: How can I change the font of when typing along a SVG path?
body: <p>I have the following code which adds letters along a path to simulate a typing effect. However, I want the last bit of text &quot;It's our jam&quot; to be a different font to the first as per the image at the bottom. Is there a way to do this? I have been trying to add a class dynamically, but it updates the entire tspan, and I cannot work out if it is possible to add a second tspan or similar?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var input = "";
  var draw = SVG().addTo("#drawing").viewbox(0, 0, 300, 140);
  var text = draw.text(function (add) {
    add.tspan(input).attr("class", "title");
  });
  
  const stringToType =
    "Great design is not just our bread + butter ... it's our jam";
  
  textPath = text.path(
    "M 10 20 C 23 15 45 12 64 20 C 99 36 96 48 135 57 C 172 65 188 61 204 58 L 204 58"
  );
  
  var count = 0;
  
  var paused = 0;
  var secondPause = 0;
  var complete = false;
  var restart = false;
  
  var newInput = "";
  
  var timer = setInterval(function () {
    if (!paused) {
      var textToAdd = stringToType[count];
  
      newInput = newInput + textToAdd;
      textPath.tspan(newInput).attr("class", "title");
  
      count++;
      if (count === stringToType.length) {
        paused++;
      }
    } else {
      clearInterval(timer);
    }
  }, 100);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    font-size: 8px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="drawing"&gt;&lt;/div&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.1.1/svg.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The effect I am trying to achieve (ignore the cheesy bit):
  <a href="https://i.stack.imgur.com/oLYl0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oLYl0.png" alt="enter image description here" /></a></p>