How to Use This Font

You can use this font in your application by downloading the font file—available in multiple formats such as TTF, WOFF, and WOFF2. You may choose the format that best fits your platform or include multiple formats for broader compatibility.

Some fonts—such as those used for Surah names or Juz titles—depend on special characters or ligatures to render correctly. Ligature files for these fonts are available on this page. Standard Quran fonts require a separate Quran script, which you can download from the Quran Scripts page.
The next step is to declare the font using @font-face in your CSS file and apply it to your elements.

Steps to Integrate

1. Download the font and scripts/ligatures
2. Define a @font-face Rule in Your CSS

   
   @font-face {
     font-family: 'qpc-hafs';
     src: url('https://static-cdn.tarteel.ai/qul/fonts/UthmanicHafs1Ver18.ttf');
     font-display: swap;
   }
         

3. Use the @font-face in your html

   You can use the font by:

   • Applying it directly via style or CSS:

   
   <div style="font-family: 'qpc-hafs';">
     
     </div>
         
   

   • Or using a CSS class:

   .my-text {
     font-family: qpc-hafs;
   }
   <p class="my-text"></p>
   

Live Preview of this font