title: Custom fonts in phonegap project
body: <p>I have a phonegap project with Arabic custom fonts. In chrome the font is displayed correctly and also in physical Android device but in phonegap app installed in iPhone the font has no impact. </p>
  
  <p>Below is a general structure phonegap project:
   - css folder which contains a css file called fonts.css
   - fonts folder which contains a TTF file called QCF_P001.TTF</p>
  
  <p>The environment I have is the following:
   - developing in Window 10
   - physical iPhone 6 device
   - phonegap app version 1.7.1 from App Store</p>
  
  <p>This is the css code:</p>
  
  <pre><code>@font-face{
      font-family: "Uthman";    
      src: url('../fonts/QCF_P001.TTF') format('truetype');   
  }
  
  .aya {
      font: 18px "Uthman", Arial;
      text-align: right;
  }
  </code></pre>
  
  <p>This is part of the HTML code:</p>
  
  <pre><code>  &lt;body ontouchstart=""&gt;
      &lt;header class="bar bar-nav"&gt;
        &lt;h1 class="title"&gt;Fonts Project&lt;/h1&gt;
      &lt;/header&gt;
      &lt;div class="content"&gt;
        &lt;div class="card"&gt;          
            &lt;h1 class="aya"&gt;65432&lt;/h1&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  </code></pre>
  
  <p>Attached image is a snapshot of chrome, android device, and iPhone device</p>
  
  <p><a href="https://i.stack.imgur.com/Tgd8I.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Tgd8I.png" alt="enter image description here"></a></p>