Added Nafees font for Urdu and Punjabi translation

src/components/Ayah/index.js

@@ -67,7 +67,8 @@ export default class Ayah extends Component {
     return array.map((content, index) => {
       const arabic = new RegExp(/[\u0600-\u06FF]/);
       const character = content.text;
-      const isArabic = arabic.test(character);
+      const isArabic  = arabic.test(character);
+      const lang      = (content.name || content.resource.name).replace(/\s+/g, '-').toLowerCase();
 
       return (
         <div
@@ -76,7 +77,7 @@ export default class Ayah extends Component {
         >
           <h4 className="montserrat">{content.name || content.resource.name}</h4>
           <h2 className={`${isArabic ? 'text-right' : 'text-left'} text-translation times-new`}>
-            <small dangerouslySetInnerHTML={{__html: content.text}} className="times-new" />
+            <small dangerouslySetInnerHTML={{__html: content.text}} className={`${styles[lang] || 'times-new'}`} />
           </h2>
         </div>
       );

src/components/Ayah/style.scss

@@ -135,10 +135,16 @@
     color: $light-green;
     margin-bottom: 5px;
   }
+
   h2{
     margin-top: 5px;
     margin-bottom: 25px;
   }
+
+  .urdu, .punjabi{
+    direction: rtl;
+    font-family: 'Nafees';
+  }
 }
 
 .word_font{

src/styles/fonts/_fonts.scss

@@ -48,6 +48,18 @@
   font-style: normal;
 }
 
+@font-face {
+  font-family: 'Nafees';
+  src: url('../../static/fonts/nafees/nafees-nastaleeq-webfont.eot?#iefix') format('embedded-opentype'),
+  url('../../static/fonts/nafees/nafees-nastaleeq-webfont.woff') format('woff'),
+  url('../../static/fonts/nafees/nafees-nastaleeq-webfont.ttf') format('truetype'),
+  url('../../static/fonts/nafees/nafees-nastaleeq-webfont.svg#NafeesRegular') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+
+
 /* This triggers a redraw in IE to Fix IE8's :before content rendering. */
 html:hover [class^="ss-"]{-ms-zoom: 1;}