Text for checking

</div>

<div class="form-item">
      <label>Search</label>
      <input type="text" oninput={ setFontsSearchQuery } value={ fontsSearchQuery } />
    </div>
  </form>

<table class="fonts-examples bordered striped">
    <thead>
      <th width="240">Font name</th>
      <th>Font example</th>
    </thead>
    <tbody>
      <tr class="fonts-example" each={ font in getFonts() }>
        <td class="fonts-example--title">{ font }</td>
        <td class="fonts-example--example" style={ parent.getFontStyle(font) } dir="rtl">
          <raw content={ parent.nl2br(parent.currentText) }></raw>
        </td>
      </tr>
    </tbody>
  </table>

tag.fonts = [
      '471btehran',
      'ah-moharram-bold',
      'albayan',
      'al-gemah-alhoda',
      'algeria',
      'alhorr',
      'alhurra',
      'al-majd',
      'almawadah',
      'almushaf',
      'alnaqaa',
      'alqusair',
      'alshohadaa',
      'Amiri-BoldSlanted',
      'Amiri-BoldSlanted',
      'amiri-bold',
      'Amiri-Bold',
      'Amiri-Bold',
      'AmiriQuranColored',
      'AmiriQuranColored',
      'amiri-quran',
      'AmiriQuran',
      'AmiriQuran',
      'amiri-regular',
      'Amiri-Regular',
      'Amiri-Regular',
      'amiri-slanted',
      'Amiri-Slanted',
      'Amiri-Slanted',
      'aqeeq',
      'arabswell-1',
      'aref-ruqaa',
      'arwa',
      'asmaa',
      'assaf',
      'aures',
      'baghdad',
      'bahij',
      'BArabics',
      'baran',
      'Basim-Marah-Beh-Light',
      'b-compset',
      'bdavat',
      'bedayah',
      'bein-normal',
      'bein',
      'b-hamid',
      'bokra',
      'bon',
      'boutros-ads',
      'b-sepideh_1',
      'b-sepideh',
      'cairo-bold',
      'cairo-extra-light',
      'cairo-light',
      'cairo',
      'DecoType-Thuluth',
      'diana-light',
      'diana-regular',
      'Diwani-Bent',
      'Diwanltr',
      'DroidKufi-Regular',
      'DroidNaskh-Regular',
      'droid-sans',
      'elmessiri-bold',
      'elmessiri-light',
      'esfahan',
      'Fanni',
      'fantezy',
      'farsi-simple-bold',
      'fixed-kufi',
      'flat-jooza-regular',
      'ghala-bold',
      'ghala',
      'hala',
      'Hamada_light_font',
      'hama-regular',
      'harmattan',
      'hayah',
      'helal',
      'homa',
      'Ibtisam',
      'insan',
      'ishraq',
      'israr-syria',
      'jannat',
      'jazeera-light',
      'jazeera',
      'jomhuria',
      'jooza-regular',
      'jordan',
      'kacst-farsi',
      'kamran',
      'katibeh',
      'KawkabMono-Regular',
      'Kitab',
      'kufi',
      'lamar',
      'lateef',
      'lemonada-bold',
      'lemonada-light',
      'lemonada',
      'mada-bold',
      'mada-light',
      'mada',
      'maghrebi',
      'maidan',
      'mbc',
      'me_quran2',
      'me_quranR3HOQ',
      'milano',
      'mirza-bold',
      'mirza-medium',
      'mirza',
      'motairah-light',
      'motairah',
      'motken',
      'muslimah',
      'nawar',
      'neckar_1',
      'neckar-bold',
      'neckar',
      'noorehuda',
      'noto-urdu',
      'Old-Antic-Bold',
      'old-antic-decorative',
      'omar',
      'osama',
      'rabat',
      'rakkas',
      'rawi',
      'rawy-bold',
      'rawy-thin',
      'reem-kufi',
      'rsail_1',
      'rsail-bold',
      'rsail-light',
      'rsail',
      'rustam_quranR3HOQ',
      'sabgha',
      'sadiyah',
      'sahlnaskh-regular',
      'sara',
      'saudi',
      'setareh',
      'shahd-bold',
      'shahd',
      'shams',
      'sheba',
      'shekari',
      'shiraz',
      'shorooq',
      'sky-bold',
      'sky',
      'smartman',
      'spirit-of-doha',
      'stc',
      'stoor',
      'strick',
      'Sukar-Black',
      'Sukar-Bold',
      'Sukar-Regular',
      'tachkili',
      'taha-naskh',
      'tanseek',
      'taqniya',
      'tasmeem-med',
      'Thabit',
      'thameen',
      'themixarab',
      'thuluth-decorated',
      'toyor-aljanah',
      'UthmanicHafs1-ver09',
      'UthmanicHafs1-ver13',
      'UthmanTN1_Ver06',
      'vip-hakm-bold',
      'vip-hakm-thin',
      'vip-hakm',
      'vip-tim-black',
      'vip-tim-bold',
      'vip-tim-light',
      'vip-tim',
      'yaraa-regular',
      'yaraa',
      'yassin',
      'zahra-bold',
      'zahra',
      'KFGQPC Uthmanic Script HAFS',
      //----External fonts---
      'Scheherazade'
    ]

tag.fontsSearchQuery = ''

tag.getFonts = function () {
        if (tag.fontsSearchQuery === '') {
          return tag.fonts
        }

return tag.fonts.filter(function (font) {
          return font.toLowerCase().indexOf(tag.fontsSearchQuery.toLowerCase()) !== -1;
        });
    }

tag.nl2br = function(str, isXhtml) {
      // Some latest browsers when str is null return and unexpected null value
      if (typeof str === 'undefined' || str === null) {
        return ''
      }

// Adjust comment to avoid issue on locutus.io display
      const breakTag = (isXhtml || typeof isXhtml === 'undefined') ? '<br ' + '/>' : '<br>'

return str.replace(/(\r\n|\n\r|\r|\n)/g, breakTag);
    }

tag.setNewText = function(event) {
      tag.currentText = event.target.value
    }

tag.setFontSize = function(event) {
      tag.fontSize = event.target.value
    }

tag.setFontsSearchQuery = function(event) {
      tag.fontsSearchQuery = event.target.value
    }

tag.getFontStyle = function(font) {
      return `
        font-family: "${font}";
        font-size: ${tag.fontSize}px;
        font-weight: ${tag.fontBold ? 'bold' : 'normal'};
        line-height: ${tag.fontSize * 1.5}px;
      `
    }

tag.setFontBold = function(event) {
      tag.fontBold = event.target.checked
    }

tag.on('mount', function() {
      parseParamsFromHash();
    });

tag.on('updated', function() {
      const hash = buildHash({
        fontSize : tag.fontSize,
        fontBold : tag.fontBold,
        text     : tag.currentText,
      });

history.replaceState(null, null, hash);
    });

function parseParamsFromHash() {
      const params = {};
      const segments = location.hash.substr(1).split('&');

segments.forEach(function (segment) {
        let param = segment.split('=');

params[param[0]] = param[1];
      });

tag.currentText = params.text ? decodeURI(params.text) : `قُلْ يَا أَيُّهَا الْكَافِرُونَ
  ثُمَّ لَتَرَوُنَّهَا عَيْنَ الْيَقِينِ`
      tag.fontSize = params.fontSize || 30
      tag.fontBold = params.fontBold ? params.fontBold === 'true' : false

tag.update();
    }

function buildHash(params) {
      const segments = []

for (const name in params) {
        segments.push(name + '=' + encodeURI(params[name]));
      }

return '#' + segments.join('&');
    }
  </script>
</arabic-fonts>

<raw>
  <span></span>
  <script>
    const tag = this

tag.root.innerHTML = opts.content

this.on('update', function() {
      tag.root.innerHTML = opts.content
    });
  </script>
</raw>

Arabic Fonts Testing