QPC V1 Font

Using this font

Download the font in whichever format suits your platform — TTF, WOFF or WOFF2 — or ship several of them so older browsers have a fallback. Then declare it with @font-face and apply it to your elements.

A font on its own is not enough to render the Quran. Most Quran fonts need a matching Quran script, because the text has to use exactly the characters the font was built for. Download the matching script from the Quran Scripts page. Fonts for Surah names, Juz titles and similar decorative text instead rely on ligatures — a lookup table that maps a name to the character that draws it. When this font has one, you will find it in the Ligatures tab above.

1. Download the font

Use the download buttons at the top of this page, then serve the file from your own site or CDN.

2. Declare it in your CSS

@font-face {
  font-family: 'p7-v1';
  src: url('https://static-cdn.tarteel.ai/qul/fonts/quran_fonts/v1/ttf/p7.ttf') format('truetype');
  font-display: swap;
}

.quran-text {
  font-family: 'p7-v1';
}

3. Use it in your markup

<p class="quran-text" dir="rtl">ﭑ ﭒ ﭓ ﭔﭕ ﭖ ﭗ ﭘ ﭙ ﭚ ﭛ
ﭤ ﭥ ﭜ ﭝ ﭞ ﭟ ﭠ ﭡ ﭢ ﭣ
ﭰ ﭱ ﭲ ﭳ ﭴ ﭵ ﭶ ﭷ ﭸ
ﭾ ﭿ ﮀ ﭹ ﭺ ﭻ ﭼ ﭽ
ﮒ ﮓ ﮔ ﮕ ﮍ ﮎ ﮏ ﮐ ﮑ
ﮛ ﮜ ﮝ ﮖ ﮗ ﮘ ﮙ ﮚ
ﮣﮤ ﮥ ﮦ ﮞ ﮟ ﮠ ﮡ ﮢ
ﮰ ﮱ ﯓﯔ ﯕ ﯖ ﯗ ﯘ ﯙ
ﯛ ﯜ ﯝ ﯞ ﯟ ﯠ ﯡ ﯢ ﯚ ﯣ
ﯤ ﯥ ﯦ ﯧ ﯨ ﯩ ﯪ ﯫ ﯬ
ﯰ ﯱ ﯲ ﯳ ﯴ ﯵ ﯶ ﯷ ﯸ ﯭ ﯮ ﯯ
ﭦ ﭧ ﭨ ﭩ ﭪﭫ ﭬ ﭭ ﭮ ﭯ
ﮁ ﮂ ﮃ ﮄ ﮅ ﮆ ﮇ ﮈﮉ ﮊ ﮋ ﮌ
ﮧ ﮨ ﮩ ﮪ ﮫﮬ ﮭ ﮮ ﮯ
ﯹ ﯺ ﯻ ﯼ ﯽ ﯾ ﯿ ﰀ ﰁ ﰂ ﰃ</p>