JSFiddle - React, Tailwind, and code Playground

HTML

<h3>
Demo: Matching Amiri metrics with <span style="color:red">Geeza Pro</span>.
</h3>

<h4>
Note: The two fonts can't perfectly match each other due to ligature differences. <br>
For example: <span style="font-family: Amiri">اليميني</span> vs. <span style="font-family: Geeza Pro; color: red">اليميني</span>
</h4>

<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=Amiri&display=swap');

@font-face {
  font-family: Geeza Pro;
  /* Amiri has ascent 1124, descent -634 and line gap 0
   * in its hhea table. Units per em is 1000.
   */
  ascent-override: calc(1124 / 1000 * 100%);
  descent-override: calc(634 / 1000 * 100%);
  line-gap-override: 000%;
  advance-override: -0.024;
  src: local(Geeza Pro Regular);
}

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

.reference {
  font-family: Amiri;
  position: absolute;
}

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

.hidden {
  visibility: hidden;
}

JavaScript

const text = `في بين حالية الإطلاق! بين جدول تحرّك بتطويق أم, تم واشتدّت واستمرت الساحلية يبق! الجوي ويتّفق ثم لكل, بين كانت بأيدي محاولات أم? ضمنها الثالث، عن لها, جيما الخارجية الانجليزية مما كل, كما كل عُقر عملية الجنود. هذه مسارح أفريقيا الأوروبيّون عن. تكاليف عسكرياً ومن ما, بين وقرى والعتاد إذ. بل بالحرب الصعداء استراليا، لكل, فقد قد تسمّى الثالث،. تصرّف الضروري الفرنسية كما من, كل جمعت وعُرفت الشمال مكن! تم لغزو السفن تلك, تنفّس سليمان، ومحاولة غير عل? اليميني والمعدات تم شيء. قتيل، الساحلية اليابانية هذه قد.`

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);
  document.querySelector('.reference').classList.remove('hidden');
  document.querySelector('.target').classList.remove('hidden');
}

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