JSFiddle - React, Tailwind, and code Playground

HTML

<h3>
Demo: Matching Merriweather Sans metrics with <span style="color:red">Roboto</span>.
</h3>

<div>
Font size: <input type=number value=16 id=fontSizeInput>
</div>

<div>
Width: <input type=number value=800 id=widthInput>
</div>

<div>
Animate <input type=checkbox id=animateCheck>
</div>

<div style="height: 20px"></div>

<div class=container>
<div class=reference></div>
<div class=target></div>
</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans&display=swap');

@font-face {
  font-family: Roboto;
  /* Merriweather Sans has 125.875px ascent and 35px
   * descent at 128px font size. Neither of the fonts
   * have internal leading.
   */
  ascent-override: calc(125.875 / 128 * 100%);
  descent-override: calc(35 / 128 * 100%);
  letter-spacing-override: 0.045;
  src: local(Roboto-Regular);
}

.container {
  position: relative;
  width: calc(var(--w) * 1px);
  height: calc(500px * var(--f) * var(--f) / var(--w));
  font-size: calc(var(--f) * 1px);
}

.reference {
  font-family: Merriweather Sans;
  position: absolute;
}

.target {
  font-family: Roboto;
  color: red;
  position: absolute;
}

.hidden {
  visibility: hidden;
}

JavaScript

const text = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse gravida nisl ac velit dignissim lacinia. Etiam eu commodo augue. Duis in elementum felis. Fusce eget vehicula odio. Suspendisse ullamcorper mattis velit, non sodales est hendrerit in. Vivamus leo sem, tempor quis interdum et, maximus varius lacus. Ut sed nibh risus. Pellentesque ullamcorper tortor pellentesque quam malesuada, euismod feugiat ligula varius. Phasellus lobortis diam ut metus tempor, sed hendrerit tellus posuere. Duis tincidunt felis in diam fermentum, in mattis sem rhoncus. Cras velit tellus, facilisis non elementum ut, accumsan ac dolor. Proin feugiat nunc in bibendum efficitur.`

document.querySelectorAll('.reference').forEach(e => e.innerHTML = text);
document.querySelectorAll('.target').forEach(e => e.innerHTML = text);

function modify() {
  const container = document.querySelector('.container');
  container.setAttribute('style', `--w: ${widthInput.value}; --f: ${fontSizeInput.value}`)
}

widthInput.onchange = modify;
fontSizeInput.onchange = modify;

modify();

let intervalId;
function startAnimate() {
  function toggle() {
    document.querySelector('.reference').classList.toggle('hidden');
    document.querySelector('.target').classList.toggle('hidden');
  }
  
  document.querySelector('.reference').classList.add('hidden');
  intervalId = setInterval(toggle, 500);
}

function stopAnimate() {
  clearInterval(intervalId);
}

animateCheck.onchange = function() {
  if (animateCheck.checked)
    startAnimate();
  else
    stopAnimate();
}