Beautiful ligature-based font for rendering all 30 Juz names and numbers. It also includes common icons like Makkah, Madinah, and decorative Surah headers—perfect for Quran apps and Juz-based navigation.
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.
Use the download buttons at the top of this page, then serve the file from your own site or CDN.
@font-face {
font-family: 'common/quran-common';
src: url('https://static-cdn.tarteel.ai/qul/fonts/common/quran-common.ttf') format('truetype');
font-display: swap;
}
.quran-text {
font-family: 'common/quran-common';
}<p class="quran-text" dir="rtl">j001 juz001</p>The preview updates as you type. It is prefilled with a sample this font can render.
This font draws each of the names below as a single glyph. Copy the ligature text into your markup and render it with this font — copying the name itself will not work.
| # | Name | Preview | Copy |
|---|---|---|---|
| 1 | surah_header | header |
|
| 2 | makkah | makkah |
|
| 3 | madinah | madinah |
|
| 4 | bismillah | ﷽ |
|
| 5 | marker | marker-half |
|
| 6 | marker2 | marker-full |
|
| 7 | ayah_open1 | s1open |
|
| 8 | ayah_close1 | s1close |
|
| 9 | ayah_open2 | s2open |
|
| 10 | ayah_close2 | s2close |
|
| 11 | ayah_open3 | s3open |
|
| 12 | ayah_close3 | s3close |
|
| 13 | juz-1-name | j001 |
|
| 14 | juz-1-number | juz001 |
|
| 15 | juz-2-name | j002 |
|
| 16 | juz-2-number | juz002 |
|
| 17 | juz-3-name | j003 |
|
| 18 | juz-3-number | juz003 |
|
| 19 | juz-4-name | j004 |
|
| 20 | juz-4-number | juz004 |
|
| 21 | juz-5-name | j005 |
|
| 22 | juz-5-number | juz005 |
|
| 23 | juz-6-name | j006 |
|
| 24 | juz-6-number | juz006 |
|
| 25 | juz-7-name | j007 |
|
| 26 | juz-7-number | juz007 |
|
| 27 | juz-8-name | j008 |
|
| 28 | juz-8-number | juz008 |
|
| 29 | juz-9-name | j009 |
|
| 30 | juz-9-number | juz009 |
|
| 31 | juz-10-name | j010 |
|
| 32 | juz-10-number | juz010 |
|
| 33 | juz-11-name | j011 |
|
| 34 | juz-11-number | juz011 |
|
| 35 | juz-12-name | j012 |
|
| 36 | juz-12-number | juz012 |
|
| 37 | juz-13-name | j013 |
|
| 38 | juz-13-number | juz013 |
|
| 39 | juz-14-name | j014 |
|
| 40 | juz-14-number | juz014 |
|
| 41 | juz-15-name | j015 |
|
| 42 | juz-15-number | juz015 |
|
| 43 | juz-16-name | j016 |
|
| 44 | juz-16-number | juz016 |
|
| 45 | juz-17-name | j017 |
|
| 46 | juz-17-number | juz017 |
|
| 47 | juz-18-name | j018 |
|
| 48 | juz-18-number | juz018 |
|
| 49 | juz-19-name | j019 |
|
| 50 | juz-19-number | juz019 |
|
| 51 | juz-20-name | j020 |
|
| 52 | juz-20-number | juz020 |
|
| 53 | juz-21-name | j021 |
|
| 54 | juz-21-number | juz021 |
|
| 55 | juz-22-name | j022 |
|
| 56 | juz-22-number | juz022 |
|
| 57 | juz-23-name | j023 |
|
| 58 | juz-23-number | juz023 |
|
| 59 | juz-24-name | j024 |
|
| 60 | juz-24-number | juz024 |
|
| 61 | juz-25-name | j025 |
|
| 62 | juz-25-number | juz025 |
|
| 63 | juz-26-name | j026 |
|
| 64 | juz-26-number | juz026 |
|
| 65 | juz-27-name | j027 |
|
| 66 | juz-27-number | juz027 |
|
| 67 | juz-28-name | j028 |
|
| 68 | juz-28-number | juz028 |
|
| 69 | juz-29-name | j029 |
|
| 70 | juz-29-number | juz029 |
|
| 71 | juz-30-name | j030 |
|
| 72 | juz-30-number | juz030 |
|