CodePen

HTML

            
              <h1><a href="http://www.google.com/fonts/earlyaccess">Google Early Access Arabic Fonts</a></h1>

<h3 class="font-name">No Web Font</h3>

<section class="default">
<h4>إنعدام لوكسيمبورج، هذا بـ. حين سقوط بالجانب</h4>
<p>بين للإتحاد والحلفاء الألماني ٣٠. مكّن الأولى حشد تم, فرنسا أوكيناوا بال ان. كلّ عن وسوء سليمان،, كان إذ جحافل الصيني, لم جهة الأخذ للإتحاد. دول الشتوية الثالث، أم, مارد وأزيز علاقة أن قام, بحق وفرنسا اسبوعين ٣٠. فاتّبع لإعلان دنو أن, حلّت هناك استمرار أن الا.
</p>
</section>

<h3 class="font-name">Amiri</h3>

<section class="amiri">
<h4>إنعدام لوكسيمبورج، هذا بـ. حين سقوط بالجانب</h4>
<p>بين للإتحاد والحلفاء الألماني ٣٠. مكّن الأولى حشد تم, فرنسا أوكيناوا بال ان. كلّ عن وسوء سليمان،, كان إذ جحافل الصيني, لم جهة الأخذ للإتحاد. دول الشتوية الثالث، أم, مارد وأزيز علاقة أن قام, بحق وفرنسا اسبوعين ٣٠. فاتّبع لإعلان دنو أن, حلّت هناك استمرار أن الا.
</p>
</section>

<h3 class="font-name">Droid Arabic Kufi</h3>

<section class="droid-arabic-kufi">
<h4>إنعدام لوكسيمبورج، هذا بـ. حين سقوط بالجانب</h4>
<p>بين للإتحاد والحلفاء الألماني ٣٠. مكّن الأولى حشد تم, فرنسا أوكيناوا بال ان. كلّ عن وسوء سليمان،, كان إذ جحافل الصيني, لم جهة الأخذ للإتحاد. دول الشتوية الثالث، أم, مارد وأزيز علاقة أن قام, بحق وفرنسا اسبوعين ٣٠. فاتّبع لإعلان دنو أن, حلّت هناك استمرار أن الا.
</p>
</section>

<h3 class="font-name">Droid Arabic Naskh</h3>

<section class="droid-arabic-naskh">
<h4>إنعدام لوكسيمبورج، هذا بـ. حين سقوط بالجانب</h4>
<p>بين للإتحاد والحلفاء الألماني ٣٠. مكّن الأولى حشد تم, فرنسا أوكيناوا بال ان. كلّ عن وسوء سليمان،, كان إذ جحافل الصيني, لم جهة الأخذ للإتحاد. دول الشتوية الثالث، أم, مارد وأزيز علاقة أن قام, بحق وفرنسا اسبوعين ٣٠. فاتّبع لإعلان دنو أن, حلّت هناك استمرار أن الا.
</p>
</section>

<h3 class="font-name">Lateef</h3>

<section class="droid-arabic-naskh">
<h4>إنعدام لوكسيمبورج، هذا بـ. حين سقوط بالجانب</h4>
<p>بين للإتحاد والحلفاء الألماني ٣٠. مكّن الأولى حشد تم, فرنسا أوكيناوا بال ان. كلّ عن وسوء سليمان،, كان إذ جحافل الصيني, لم جهة الأخذ للإتحاد. دول الشتوية الثالث، أم, مارد وأزيز علاقة أن قام, بحق وفرنسا اسبوعين ٣٠. فاتّبع لإعلان دنو أن, حلّت هناك استمرار أن الا.
</p>
</section>

<h3 class="font-name">Scheherazade</h3>

<section class="scheherazade">
<h4>إنعدام لوكسيمبورج، هذا بـ. حين سقوط بالجانب</h4>
<p>بين للإتحاد والحلفاء الألماني ٣٠. مكّن الأولى حشد تم, فرنسا أوكيناوا بال ان. كلّ عن وسوء سليمان،, كان إذ جحافل الصيني, لم جهة الأخذ للإتحاد. دول الشتوية الثالث، أم, مارد وأزيز علاقة أن قام, بحق وفرنسا اسبوعين ٣٠. فاتّبع لإعلان دنو أن, حلّت هناك استمرار أن الا.
</p>
</section>

<h3 class="font-name">Thabit</h3>

<section class="thabit">
<h4>إنعدام لوكسيمبورج، هذا بـ. حين سقوط بالجانب</h4>
<p>بين للإتحاد والحلفاء الألماني ٣٠. مكّن الأولى حشد تم, فرنسا أوكيناوا بال ان. كلّ عن وسوء سليمان،, كان إذ جحافل الصيني, لم جهة الأخذ للإتحاد. دول الشتوية الثالث، أم, مارد وأزيز علاقة أن قام, بحق وفرنسا اسبوعين ٣٠. فاتّبع لإعلان دنو أن, حلّت هناك استمرار أن الا.
</p>
</section>
            
          
!

CSS

            
              @import url(http://fonts.googleapis.com/earlyaccess/amiri.css);
@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);
@import url(http://fonts.googleapis.com/earlyaccess/droidarabicnaskh.css);
@import url(http://fonts.googleapis.com/earlyaccess/lateef.css); 
@import url(http://fonts.googleapis.com/earlyaccess/scheherazade.css);
@import url(http://fonts.googleapis.com/earlyaccess/thabit.css);

*{
  direction:rtl;
  color:#444;
}

h3{
  background:#222;
  color:#f9f9f9;
   padding:5px;
}

.amiri{font-family: 'Amiri', serif;}
.droid-arabic-kufi{font-family: 'Droid Arabic Kufi', serif;}
.droid-arabic-naskh{font-family: 'Droid Arabic Naskh', serif;}
.lateef{font-family: 'Lateef', serif;}
.scheherazade{font-family: 'Scheherazade', serif;}
.thabit{font-family: 'Thabit', serif;}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................