Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Custom fonts in phonegap project #437

Open
abdallah-amoudi opened this issue Aug 14, 2016 · 3 comments
Open

Custom fonts in phonegap project #437

abdallah-amoudi opened this issue Aug 14, 2016 · 3 comments

Comments

@abdallah-amoudi
Copy link

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
Copy link
Contributor

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
Copy link
Contributor

@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
Copy link
Author

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@devgeeks @abdallah-amoudi