SyncTwoFonts

HTML

<div id="container">
  <textarea id="fontToRender"></textarea>
  <textarea id="fontToType">test</textarea>
</div

CSS

#container {
  position: relative;
  width: 600px;
  height: 300px;
}
#fontToRender,
#fontToType {
  position: absolute; /* position on the same place */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 20px;
  font-size: 48px; /* to sync the cursor and text */
  line-height: 1em;
  outline: none;
  text-decoration: none;
}
#fontToRender {
  font-family: "Font-ToRender";
  color: darkblue;
}
#fontToType {
  font-family: "Font-ToType";
  border-color: transparent; /* no double border */
  background-color: transparent; /* to see the lower text element */
  color: transparent; /* text is invisible */
  caret-color: darkgreen;  /* cursor is visible */
}

JavaScript

let fontToRender = document.getElementById('fontToRender');
let fontToType = document.getElementById('fontToType');

let fontSync = () => fontToRender.value = fontToType.value;
fontSync();
fontToType.addEventListener('input', fontSync);