The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V  1 2 >  
 Reply to this topicStart new topic
> Custom Urdu font (jameel noori nastaleeq), urdu font in android apk
chunu
post Feb 10 2023, 08:59 AM
Post #1


Newbie
*

Group: Members
Posts: 10
Joined: 10-February 23
Member No.: 28,798
Hi,
I have simple html to search data with javascript.
I have converted html file to apk with web2apk software to use on android.
I have used google font noto nastaleeq in css which works welI. But i want to use custom urdu font (jameel noori nastaleeq).
Can somebody help me to achieve this.
Thanks
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 10 2023, 10:59 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,737
Joined: 9-August 06
Member No.: 6
I only know how it works on the web. You need the actual font file uploaded to your server. Then use use the same CSS as you do when the font font file is on Google's server, with appropriate changes of course.

But I don't know how this app conversion works. Do your app access the web, or is everything baked into the app, including font files? Anyway, if it works with a Google font it should work with your own font too, I think.

See here for more detail.
https://developer.mozilla.org/en-US/docs/Le..._text/Web_fonts
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Feb 10 2023, 12:33 PM
Post #3


Advanced Member
****

Group: Members
Posts: 207
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743
Hi there chunu,

Unfortunately, the jameel-noori-nastaleeq-regular.tff file is over 10mb in size
and after cunverting it to woff2 for the web it is still over 5mb in size. IPB Image

This means that I cannot post the working solution here.

Instead, if you wish to view it, you will need to download it here...

jameel-noori-nastaleeq-regular.zip

coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Jason Knight
post Feb 11 2023, 01:00 AM
Post #4


Advanced Member
****

Group: Members
Posts: 109
Joined: 25-December 22
Member No.: 28,719
QUOTE(coothead @ Feb 10 2023, 12:33 PM) *

This means that I cannot post the working solution here.

And it means that as much as one might like the font, it's utterly unsuited for deployment on anything web-facing. Which sucks, but limitations of the medium are something to keep in mind at all times.

This post has been edited by Jason Knight: Feb 11 2023, 01:00 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
chunu
post Feb 11 2023, 03:35 AM
Post #5


Newbie
*

Group: Members
Posts: 10
Joined: 10-February 23
Member No.: 28,798
QUOTE(coothead @ Feb 10 2023, 10:33 PM) *

Hi there chunu,

Unfortunately, the jameel-noori-nastaleeq-regular.tff file is over 10mb in size
and after cunverting it to woff2 for the web it is still over 5mb in size. IPB Image

This means that I cannot post the working solution here.

Instead, if you wish to view it, you will need to download it here...

jameel-noori-nastaleeq-regular.zip

coothead

Hi, can you please check this code where i am wrong, it's not working?
[code]<html>
<head>
<style>
@font-face {
font-family: 'Jameel Noori Nastaleeq';
src: url('https://www.fontsaddict.com/fontface/jameel-noori-nastaleeq.ttf');
}
body {
font-family: 'Jameel Noori Nastaleeq', serif;
}
</style>
</head>
<body>
<h1>اسلام علیکم</h1>
</body>
</html>[code]
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Feb 11 2023, 06:08 AM
Post #6


Advanced Member
****

Group: Members
Posts: 207
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743
Hi there chuno,

the zip file contained...
  1. fonts folder containing the JameelNooriNastaleeq.woff2 file
  2. css folder containing the screen.css file
  3. the index.html file
Why are you not using the index,html file that I provided? IPB Image

CODE

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Jameel Noori Nastaleeq Font</title>

<link rel="stylesheet" href="css/screen.css" media="screen">

</head>
<body>

<h1>The quick brown fox jumps over the lazy dog</h1>

</body>
</html>


This, of course, begs the question: when you unzipped the file did you actually test the index.html file?

coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
chunu
post Feb 11 2023, 07:08 AM
Post #7


Newbie
*

Group: Members
Posts: 10
Joined: 10-February 23
Member No.: 28,798
QUOTE(coothead @ Feb 11 2023, 04:08 PM) *

Hi there chuno,

the zip file contained...
  1. fonts folder containing the JameelNooriNastaleeq.woff2 file
  2. css folder containing the screen.css file
  3. the index.html file
Why are you not using the index,html file that I provided? IPB Image

CODE

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Jameel Noori Nastaleeq Font</title>

<link rel="stylesheet" href="css/screen.css" media="screen">

</head>
<body>

<h1>The quick brown fox jumps over the lazy dog</h1>

</body>
</html>


This, of course, begs the question: when you unzipped the file did you actually test the index.html file?

coothead

Yes i have tested your file and that is working on my pc as local file path, But when i upload your files to my mediafire account and try to link src: url it does not work.
How can i link to this sever (src: url('https://www.fontsaddict.com/fontface/jameel-noori-nastaleeq.ttf') this site mentioned that You may use our server to host the font file for free[color=#6633FF][u]. can you help please.
Thanks
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 11 2023, 08:32 AM
Post #8


.
********

Group: WDG Moderators
Posts: 9,686
Joined: 10-August 06
Member No.: 7
QUOTE(coothead @ Feb 10 2023, 06:33 PM) *

Unfortunately, the jameel-noori-nastaleeq-regular.tff file is over 10mb in size
and after cunverting it to woff2 for the web it is still over 5mb in size. IPB Image

This means that I cannot post the working solution here.

Is there something else wrong with "jameel-noori-nastaleeq-regular.tff", except its large file size? Since the OP wants to use it in an APK file maybe the size is not so important (as opposed to using it on a web page).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
chunu
post Feb 11 2023, 09:01 AM
Post #9


Newbie
*

Group: Members
Posts: 10
Joined: 10-February 23
Member No.: 28,798
QUOTE(Christian J @ Feb 11 2023, 06:32 PM) *

QUOTE(coothead @ Feb 10 2023, 06:33 PM) *

Unfortunately, the jameel-noori-nastaleeq-regular.tff file is over 10mb in size
and after cunverting it to woff2 for the web it is still over 5mb in size. IPB Image

This means that I cannot post the working solution here.

Is there something else wrong with "jameel-noori-nastaleeq-regular.tff", except its large file size? Since the OP wants to use it in an APK file maybe the size is not so important (as opposed to using it on a web page).

Hi,
The software i am using is just converting html file to apk not packing font inside apk. i am tying to link font from server, with google font(noto nastaleeq) its working.
maybe jameel noori nastaleeq.tff link not working because of file size as coothead mentioned. i am not sure, i do not know about code.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 11 2023, 09:03 AM
Post #10


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,737
Joined: 9-August 06
Member No.: 6
Even on the web it will be cached, won't it?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 11 2023, 03:31 PM
Post #11


.
********

Group: WDG Moderators
Posts: 9,686
Joined: 10-August 06
Member No.: 7
QUOTE(chunu @ Feb 11 2023, 01:08 PM) *

How can i link to this sever (src: url('https://www.fontsaddict.com/fontface/jameel-noori-nastaleeq.ttf') this site mentioned that You may use our server to host the font file for free.

Maybe they are promising more than they can keep?

An alternative could be to host the font on your own server, but with many users that could become expensive.

I also see different fonts on www.fontsaddict.com marked as Freeware, Shareware or Personal use; but with no other information about Terms and Conditions, or how to pay for the shareware fonts. unsure.gif Since Jameel Noori Nastaleeq is marked as Personal use, you may get into copyright trouble if you use it in a publicly available mobile app.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Feb 11 2023, 06:01 PM
Post #12


Advanced Member
****

Group: Members
Posts: 207
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743
Hi there chunu,

I had an interesting AI conversation here...
...which may be pertinent to your problem(s)...
  • Q. Do you have information about APKs?
  • A. Yes, APKs (Android Package Kits) are a type of file used to install software on Android devices.
    They are similar to EXE files used to install software on Windows devices. APKs contain the code
    and resources needed to run a program on an Android device, such as the Android operating
    system, libraries and other files.
  • Q. Will it render woff2 or ttf fonts?
  • A. No, APKs are only used to install software on Android devices, they do not render fonts.
  • Q. OK, so what font software does APK install on Android devices?
  • A. APKs are used to install various types of software on Android devices, including web browsers,
    media players, productivity tools, and games. However, they do not install any specific font
    software.
  • Q. So how do I get an Android device to display a font of my choice?
  • A. In order to display a font of your choice on an Android device, you will need to use a font
    management application    . Many font management apps are available in the Google Play Store
    and can be used to install and manage fonts for Android devices.
  • Q. Can you name the top three of these font management apps?
  • A. The top three font management apps for Android devices are FontFix, iFont, and Font Changer.
  • Me.Thank you kindly for your excellent answers.
  • AI. You're welcome! Glad I could help.


Note

The highlighting etc is mine not the AI's IPB Image

coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 11 2023, 09:27 PM
Post #13


.
********

Group: WDG Moderators
Posts: 9,686
Joined: 10-August 06
Member No.: 7
QUOTE(coothead @ Feb 12 2023, 12:01 AM) *

[*]Q. So how do I get an Android device to display a font of my choice?
[*]A. In order to display a font of your choice on an Android device, you will need to use a font
management application. Many font management apps are available in the Google Play Store
and can be used to install and manage fonts for Android devices.

Does this apply to Android app developers, though? The answer sounds more like how an Android user may install fonts on his own phone. unsure.gif

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 11 2023, 10:57 PM
Post #14


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,737
Joined: 9-August 06
Member No.: 6
But the OP got the google font to work. So it must work as with a web page, the font is temporarily downloaded. As long as the phone is connected to the internet.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
chunu
post Feb 12 2023, 12:21 AM
Post #15


Newbie
*

Group: Members
Posts: 10
Joined: 10-February 23
Member No.: 28,798
QUOTE(pandy @ Feb 12 2023, 08:57 AM) *

But the OP got the google font to work. So it must work as with a web page, the font is temporarily downloaded. As long as the phone is connected to the internet.


Thanks, everybody,
Finally with the help of this page (https://github.com/inshapardaz/urdu-web-fonts)
I manage to achieve the Gole.
below is the working code.
CODE
@import url('https://urdu-fonts.netlify.app/jameel-noori-nastalique/stylesheet.css');

@font-face {
    font-family: 'JameelNooriNastaleeq';
    src: url('./JameelNooriNastaleeq.eot');
    src: url('./JameelNooriNastaleeq.eot?#iefix') format('embedded-opentype'), url('./JameelNooriNastaleeq.woff2') format('woff2'), url('./JameelNooriNastaleeq.woff') format('woff'), url('./JameelNooriNastaleeq.ttf') format('truetype'), url('./JameelNooriNastaleeq.svg#JameelNooriNastaleeq') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}
body {
  font-family: 'JameelNooriNastaleeq', sans-serif;
  font-size: 18px;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

Thanks again.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
chunu
post Feb 12 2023, 04:42 AM
Post #16


Newbie
*

Group: Members
Posts: 10
Joined: 10-February 23
Member No.: 28,798
QUOTE(chunu @ Feb 12 2023, 10:21 AM) *

QUOTE(pandy @ Feb 12 2023, 08:57 AM) *

But the OP got the google font to work. So it must work as with a web page, the font is temporarily downloaded. As long as the phone is connected to the internet.


Thanks, everybody,
Finally with the help of this page (https://github.com/inshapardaz/urdu-web-fonts)
I manage to achieve the Gole.
below is the working code.
CODE
@import url('https://urdu-fonts.netlify.app/jameel-noori-nastalique/stylesheet.css');

@font-face {
    font-family: 'JameelNooriNastaleeq';
    src: url('./JameelNooriNastaleeq.eot');
    src: url('./JameelNooriNastaleeq.eot?#iefix') format('embedded-opentype'), url('./JameelNooriNastaleeq.woff2') format('woff2'), url('./JameelNooriNastaleeq.woff') format('woff'), url('./JameelNooriNastaleeq.ttf') format('truetype'), url('./JameelNooriNastaleeq.svg#JameelNooriNastaleeq') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}
body {
  font-family: 'JameelNooriNastaleeq', sans-serif;
  font-size: 18px;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

Thanks again.


Now one more help, how can i change @import url with my own , i have created two folders on github (css and fonts). this is my css file.
CODE
https://github.com/shaplooka/urdu-css/blob/main/css/screen.css
I have just replaced css file link but it did not work, i thing path is not correct , please need help.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 12 2023, 06:23 AM
Post #17


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,737
Joined: 9-August 06
Member No.: 6
That URL leads to a HTML page that displays the CSS. Try https://raw.githubusercontent.com/shaplooka.../css/screen.css .

But why have you put it on github?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Feb 12 2023, 06:32 AM
Post #18


Advanced Member
****

Group: Members
Posts: 207
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743
Hi there chunu,

if you don't want to use @import then you would need
to download the actual fonts and the svg document...

Whether this is legal or not I do not know, but I would
suggest that it is definitely up to you to find out.

coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
chunu
post Feb 12 2023, 07:29 AM
Post #19


Newbie
*

Group: Members
Posts: 10
Joined: 10-February 23
Member No.: 28,798
QUOTE(coothead @ Feb 12 2023, 04:32 PM) *

Hi there chunu,

if you don't want to use @import then you would need
to download the actual fonts and the svg document...Whether this is legal or not I do not know, but I would
suggest that it is definitely up to you to find out.

coothead

Thanks for your time. i have changed css file link and its working now using @import as wel as with the file you gave earlier.
this my new css sheet.
CODE
https://shaplooka.github.io/chand/screen1.css
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 12 2023, 07:56 AM
Post #20


.
********

Group: WDG Moderators
Posts: 9,686
Joined: 10-August 06
Member No.: 7
QUOTE(pandy @ Feb 12 2023, 04:57 AM) *

But the OP got the google font to work. So it must work as with a web page, the font is temporarily downloaded. As long as the phone is connected to the internet.

I was thinking the fontsaddict site was slow, or even ignored requests for the 10MB font file; while the font file that worked perhaps was much smaller, and was hosted by Google? But it's just speculation.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

2 Pages V  1 2 >
Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 15th June 2024 - 12:28 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC