استعمل خطوط القرآن في تطبيقك

/* 1. Load the font */
@font-face {
    font-family: 'UthmanicHafs';
    src: url('https://fonts.quran.ws/assets/fonts/uthmanic-hafs-v22.woff2') format('woff2');
    font-display: swap;
}

/* 2. Use it on any Arabic text */
.quran {
    font-family: 'UthmanicHafs', 'Amiri', serif;
    direction: rtl;
    font-size: 2rem;
    line-height: 2.3;
}

<!-- 1. Load the font for the specific page you want -->
<style>
    @font-face {
        font-family: 'QCF_P001';
        src: url('https://fonts.quran.ws/assets/fonts/qpc-hafs-v1/QCF_P001.woff2') format('woff2');
    }
    .page-glyph {
        font-family: 'QCF_P001';
        unicode-bidi: bidi-override; /* PUA defaults to LTR; override to RTL */
        direction: rtl;
        font-size: 2rem;
    }
</style>

<!-- 2. Fetch the paired ayah-keyed glyph data -->
<script>
const data = await fetch('https://fonts.quran.ws/bundles/qpc-hafs-v1/quran-glyphs.json').then(r => r.json());
// Each ayah is {surah, ayah, chunks: [{p, family, file, text}]} — render the first chunk
const ayah = data.ayat[0];
document.querySelector('.page-glyph').textContent = ayah.chunks.map(c => c.text).join('');
</script>

<!-- 3. Render -->
<div class="page-glyph"></div>

<!-- No font needed — pair the tajweed-coloured mushaf text with any renderer. -->
<!-- Grab the ready-to-use bundle from https://fonts.quran.ws/bundles/hafs-tajweed/ -->
<script>
const r = await fetch('https://fonts.quran.ws/bundles/hafs-tajweed/quran.json').then(r => r.json());
const ayah = r.ayat.find(a => a.surah === 2 && a.ayah === 255);
document.querySelector('.ayah').textContent = ayah.text;
</script>

<span class="ayah"></span>