Custom fonts in phonegap project

abdallah-amoudi commented 8 years ago

Dear @devgeeks

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 stack

devgeeks commented 8 years ago

This sounds like a path resolution issue. We have been talking about ways to minimise these kinds of issues with the developer app.

Can you try something for me?

Try having the font in the same folder as the CSS and reference it like:

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

devgeeks commented 8 years ago

@abdallah-amoudi After some further testing, it doesn't seem to be a paths issue. I was able to get an arabic font referenced in the same way working on the developer app.

The only things I can think to test are to be sure the file name is correctly cased (not sure if that makes a difference).

I downloaded an arabic font called 'arabweb1.ttf' and placed it in a fresh app and referenced it in the CSS as below:

@font-face{
    font-family: "Arabic Web";    
    src: url('../fonts/arabweb1.ttf') format('truetype');   
}

body {
  font-family:'Arabic Web', serif;
  /* other styles, etc */
}

and was able to get it to work on iOS in the developer app:

2016-08-15 09 43 14

abdallah-amoudi commented 8 years ago

@devgeeks I tried other ttf files and it seems to be working. I am not sure is it the structure of the TTF file itself has something to do with phonegap IOS ? because my original TTF file already works fine with phonegap Android

phonegap / phonegap-app-developer

Custom fonts in phonegap project #437