<p> Native Fonts in WordPress </p>
<a id="start" href="#go">start</a>
<a id="reset" href="#go">reset</a>

body {
  padding: 10vh 10vw
}

p {
  font-family: 'Open Sans', sans-serif;
  font-size:3em;
  color: #A0A5AA;
  transition: all .15s ease-out;
}

@keyframes cursor {
  0% {
    color: #A0A5AA;
  }
}

p {
  span {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; 
    color: #0073aa;

    + span:last-child {
      animation: cursor .3s ease-in 1;
    }
  }
}

var walking = false;
var interval = false;
$('#start').click(function(){
  startWalk();
});
$('#reset').click(function(){
  walking = false;
  clearInterval( interval );
  $('p').html( function(i,html ) {
      return html.replace(/(<([^>]+)>)/ig,"");
  });
});
function startWalk(){
  console.log( interval);
  if ( walking )
    return;
  walking = true;
  var spans = 0;
  interval = setInterval(function(){
    spans++;
    $('p').html( function( i,html ) {
      var chars = html.replace(/(<([^>]+)>)/ig,"").split("");
      var spanning = chars.splice(0,spans);
      if ( (chars.length + spanning.length) <= spans ){
        clearInterval( interval );
        return html;
      } else {
        return '<span>' + spanning.join('</span><span>') + '</span>' + chars.join('');
      }
      });
  }, 300);
  
}