@font-face {
    font-family: Naskh;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/assets/fonts/arabic/uthman/UthmanTN.eot);
    src: url(/assets/fonts/arabic/uthman/UthmanTN.eot?#iefix) format("embedded-opentype"),
        url(/assets/fonts/arabic/uthman/UthmanTN.woff2) format("woff2"),
        url(/assets/fonts/arabic/uthman/UthmanTN.woff) format("woff"),
        url(/assets/fonts/arabic/uthman/UthmanTN.ttf) format("truetype"),
        url(/assets/fonts/arabic/uthman/UthmanTN.svg#svgFontName) format("svg");
}

@font-face {
    font-family: Naskh;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/assets/fonts/arabic/uthman/UthmanTN-Bold.eot);
    src: url(/assets/fonts/arabic/uthman/UthmanTN-Bold.eot?#iefix) format("embedded-opentype"),
        url(/assets/fonts/arabic/uthman/UthmanTN-Bold.woff2) format("woff2"),
        url(/assets/fonts/arabic/uthman/UthmanTN-Bold.woff) format("woff"),
        url(/assets/fonts/arabic/uthman/UthmanTN-Bold.ttf) format("truetype"),
        url(/assets/fonts/arabic/uthman/UthmanTN-Bold.svg#svgFontName) format("svg");
}

@font-face {
    font-family: AQF_BSML;
    src: url("/assets/fonts/arabic/titles.woff") format("woff"),
        url("/assets/fonts/arabic/titles.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Hafs and Book are declared in resources/css/app.css, not here.
 *
 * This file is deferred on the main site, so an @font-face in it is only
 * discovered after the first paint. Both faces are in the render-blocking
 * bundle instead, which finds them earlier on the pages that use them and
 * still downloads nothing on the pages that do not. */

/* No `body { font-family }` rule here on purpose.
 *
 * app.css already sets the body face, and sets it with its metric-matched
 * fallback: 'IBM Plex Sans Arabic', 'IBM Plex Sans Arabic Fallback', sans-serif.
 * This file loads AFTER app.css on the main site (it is deferred with
 * media="print"), and Tailwind flattens @layer away, so a `body` rule here
 * wins on document order and silently drops that fallback — after the first
 * paint. Every page then reflowed from matched metrics to unmatched ones.
 * Leave the body face to app.css. */

.surah-name {
    font-family: AQF_BSML, serif;
    font-weight: normal;
}

.hafs-font {
    font-family: Hafs, 'Hafs Fallback', serif;
}

.Naskh {
    font-family: Naskh, serif;
}

.poppins {
    font-family: "Poppins", sans-serif;
}

.book {
    font-family: Book, sans-serif;
}