Custom fonts in phonegap project

Question

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.

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

The environment I have is the following: - developing in Window 10 - physical iPhone 6 device - phonegap app version 1.7.1 from App Store

This is the css code:

@font-face{
    font-family: "Uthman";    
    src: url('../fonts/QCF_P001.TTF') format('truetype');   
}

.aya {
    font: 18px "Uthman", Arial;
    text-align: right;
}

This is part of the HTML code:

  <body ontouchstart="">
    <header class="bar bar-nav">
      <h1 class="title">Fonts Project</h1>
    </header>
    <div class="content">
      <div class="card">          
          <h1 class="aya">65432</h1>
      </div>
    </div>
  </body>

Attached image is a snapshot of chrome, android device, and iPhone device

score 1 · Answer 1 · answered Oct 10 '17 at 06:30

Try adding other formats to the font bundle:

@font-face {
  font-family: 'QCF_P001';
  src: url('../fonts/QCF_P001.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/QCF_P001.woff') format('woff'), /* Pretty Modern Browsers */
       url('../fonts/QCF_P001.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/QCF_P001.svg#QCF_P001') format('svg'); /* Legacy iOS */
}

To generate web font from QCF_P001.ttf go to Font Squirrel font generator

Custom fonts in phonegap project

1 Answers1