Custom Fonts in Android PhoneGap
I made it work after doing the following steps:
-Put your CSS in a file, for example my_css.css
:
@font-face {
font-family: "customfont";
src: url("./fonts/arial.ttf") format("opentype");
/* Make sure you defined the correct path, which is related to
the location of your file `my_css.css` */
}
body {
font-family: "customfont";
font-size:30px;
}
-Reference your CSS file my_css.css
in your HTML:
<link rel="stylesheet" href="./path_to_your_css/my_css.css" />
Pay attention to the definition of your paths!
For example, let's say you have the following directory structure:
www
your_html.html
css
my_css.css
fonts
arial.ttf
Then, you would have:
@font-face {
font-family: "customfont";
src: url("../fonts/arial.ttf") format("opentype");
/* Make sure you defined the correct path, which is related to
the location of your file `my_css.css` */
}
body {
font-family: "customfont";
font-size:30px;
}
and:
<link rel="stylesheet" href="./css/my_css.css" />
Note: if you use jQuery Mobile, the solution may not work (jQuery Mobile will "interfere" with the css...).
So, you may try to impose your style by using the style attribute.
Eg:
<body>
<h>Custom Fonts</h>
<div style="font-family: 'customfont';">This is for sample</div>
</body>
One drawback is that it seems that the style
cannot be applyied on body
...
So, if you want to apply the font to the whole page, you may try something like this:
<body>
<!-- ADD ADDITIONAL DIV WHICH WILL IMPOSE STYLE -->
<div style="font-family: 'customfont';">
<h>Custom Fonts</h>
<div >This is for sample</div>
</div>
</body>
Hope this will work for you too. Let me know about your results.
Phonegap : Custom font is not working
Can you try relative path from root folder, i.e instead of:
src: url('fonts/cooperblackstd.eot');
try
src: url('/fonts/cooperblackstd.eot');
presuming fonts is a folder at the same level as your .html file under the www folder.
Regards,
Not able to use custom fonts in Phonegap
After a bit of research, I found this article.
The builder will not copy the files from the res
folder, just the ones you link to in the config file.
So by moving the /fonts
folder to my css
folder, the problem was solved.
Custom Persian And Arabic Fonts in Android 4.1.2 Phonegap (Cordova) not working
finally I overcome this issue on Persian And Arabic custom fonts,
Keep all the codes with @fontface
as same as it is,
Download this package http://averta.net/labs/fa/?p=10
From extracted archive, add bifon-1.1b.js
to your html and use this script
function onDeviceReady() {
$('#txt1').text(FarsiStyle.convert('سلام عليكم').split('').reverse().join('').split(' ').reverse().join(' '));
}
which txt1 is a div or span.
p.s Thanks to Mr. Morteza F. Shojaei
how to use custom font in phone gap?
<style type="text/css" media="screen">
@font-face {
font-family: centurySchoolbook;
src: url(/fonts/century-schoolbook.ttf);
}
body {
font-family: centurySchoolbook;
font-size:30px;
}
</style>
If your font still doesn't work, make sure you're spelling its typeface name and its file name correctly, your app caches are behaving, your mobile OS isn't messing around with a font. check the css overwriting things first.
Custom fonts in hybrid mobile app (phone gap) UI
I've been using Cordova and that approach for some time now, and never had problems with it. Provided that this is what you're doing...
@font-face
{
font-family: dinpro_black;
src: url('../fonts/DINPro Black.otf');
}
.font_black {
font-family:dinpro_black;
}
Related Topics
How to Use "Goasync" for Broadcastreceiver
How to Load Class Androidcomponentsextension After Upgrading the Android Gradle Plugin 7.1
How to Test Boot_Completed Broadcast Receiver in Emulator
Send Request Over Wifi (Without Connection) Even If Mobile Data Is on (With Connection) on Android M
Fused Location Provider Unexpected Behavior
What Is the Android UI Thread Stack Size Limit and How to Overcome It
Launching an Android Application from the Browser
Android Sdk Tools Revision 22 Issue
How to Get Dependencies from Jcenter with a New Project
Android: Outofmemoryerror: Bitmap Size Exceeds Vm Budget with No Reason I Can See
How to Use Getlistview() in Activity
Android - Loop Part of the Code Every 5 Seconds
Android - Detect End of Long Press
Moving from One Activity to Another Activity in Android
Android: How to Create Fade-In/Fade-Out Sound Effects for Any Music File That My App Plays