I tried to make custom fonts for my application. For that, I wrote this code in my html file:
<style type="text/css" media="screen">
#font-face {
font-family: centurySchoolbook;
src: url(/fonts/arial.ttf);
}
body {
font-family: centurySchoolbook;
font-size:30px;
}
</style>
In my Html Body:
<body onload="init();">
<h>Custom Fonts</h>
<div>This is for sample</div>
</body>
But, these styles are not applied to my html body..
Any help to solve this..??
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.
Below works like charm for custom font with jQueryMobile and Phonegap:
#font-face {
font-family: "Lato-Reg";
src: url("../resources/Fonts/Lato-Reg.ttf") format("opentype");
/* Make sure you defined the correct path, which is related to
the location of your file `my_css.css` */
}
body *{
margin: 0;
-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
font-family: "Lato-Lig" !important;
font-weight: normal !important;
}
I also faced the same problem. I put my css file in the css folder. I put the ttf file in just the www folder and it didn't work properly, so I moved my ttf file into the css folder. Here is my code:
#font-face
{
font-family: CustomArial;
src: url('arial.ttf');
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
font-family: CustomArial;
}
If you are using jquery mobile, you have to override the font like:
.ui-bar-a, .ui-bar-a input, .ui-bar-a select, .ui-bar-a textarea, .ui-bar-a button {
font-family: CustomArial !important;
}
You have to override the font-family in your css for whatever jquery mobile class having font-family:Helvetica, Arial, sans-serif; to
font-family:CustomArial !important;
Now it will work. You can try like this, may be its useful for you.
here your can find the .ttf the google fonts : https://github.com/w0ng/googlefontdirectory
in your .css file
#font-face {
font-family: 'Open Sans';
src: url('../font/OpenSans-Regular.ttf') format('truetype');
font-weight: 400;
}
I was facing a similiar issue. The problem was with the path it was taking when the font was given through an external css file.
To resolve this, i declared the font URL inline in the body of index.html
<div>
<style scoped>
#font-face {
font-family: Monotype Corsiva;
src: url('fonts/Monotype_Corsiva.ttf') format('truetype');
}
</style>
</div>
It worked after declaring the font URL in this manner.
<style type="text/css" media="screen">
#font-face {
font-family: 'centurySchoolbook';
src: url('fonts/arial.ttf');
}
body {
font-family: centurySchoolbook;
font-size:30px;
}
</style>
with quotes on the font-family and on the url worked for me, inside the html file and on Android.
It works on physical devices, but not on emulator.
The possible issues lies in default index.css in cordova. Check if the body element has style defined for "text-transform:uppercase".
Atleast that was the issue for me, after removing this from body element in default index.css if you are using in your application, may help you as well.
For me I was using gurmukhi/punjabi fonts, and after the above line removal from index.css it just worked like charm with below css definiitions only
Example :
.demo {
font-family: anmol
}
#font-face {
font-family: anmol;
src: url(../fonts/anmol.ttf);
}
I just copied my ttf-fonts into the directory [app-name]/css and declared the font-families in the index.css there. See attached image: my edited index.css (Check the green marked areas in the attached picture). There i also changed the style "background-attachment:fixed;" "Helvetica, Arial, no-serif…" to "Open Sans, Open Sans Condensed, no-serif", – i also deleted the line "text-transform:uppercase". After that everything worked fine with my font "Open Sans".
Of course i also included my own stylesheet with declarations of the other styles and font-families of my project.
I am also using jQuery and jQueryMobile in that project. They use the same font (Open Sans), but i added additional fonts that work as well!
Happy coding!
Related
I have two weights of the same font.
Per https://stackoverflow.com/a/41678274/877682, I see that the font-family must match the file name on Android, so I named the font files [Font name] Regular.ttf" and "[Font name] SemiBold.ttf".
I then tried to include the semi-bold via
font-family: [Font name];
font-weight: 600;"
However, Android can't find it, defaulting to a sans-serif font (which I assume is Roboto).
What's the expected font file naming system in this case? Do I need to create separate android and ios CSS files, and then simply name use font-family: [Font name] Semibold; on android?
I believe the best approach here would be to use #font-face to create a font-family composed of all your files.
If I had three weights of a font, and wanted to build a family out of them, I would do it like so:
#font-face {
font-family: 'Open Sans';
src: url('~/fonts/Open Sans Regular.tff') format('truetype');
font-weight: 300;
}
#font-face {
font-family: 'Open Sans';
src: url('~/fonts/Open Sans Light.tff') format('truetype');
font-weight: 100;
}
#font-face {
font-family: 'Open Sans';
src: url('~/fonts/Open Sans Bold.tff') format('truetype');
font-weight: 500;
}
I can then use this else where via:
Label {
font-family: 'Open Sans';
font-weight: 300; // Regular Open Sans
}
Label.mod-light {
font-weight: 100; // Light Open Sans
}
Label.mod-bold {
font-weight: 500; // Bold Open Sans
}
Benefit of this approach is that you don't need to add further properties to your css or HTML to support font weights dependent on each device.
I never found a way to do this without separate iOS and Android files, with font-family definitions for each weight of the font on Android.
Since Android requires exact font file names, I can't use a default font for all labels and vary the font-weights accordingly, like I can on iOS.
app.css:
#import "~/platform.css"; /* Platform-dependent styles */
#import "~/app-common.css"; /* Platform-independent styles */
platform.ios.css:
/* Default font: used everywhere except classes below */
Label {
font-family: "My Body Font"; /* Exact font name */
}
.heading-1, .heading-2, .heading-2-subtext {
font-family: "My Display Font"; /* Exact font name */
}
platform.android.css:
.heading-1, .heading-2 {
font-family: "MyDisplayFont-Bold"; /* file name: MyDisplayFont-Regular-Bold.otf */
}
.heading-2-subtext {
font-family: "MyDisplayFont-Regular"; /* file name: MyDisplayFont-Regular.otf */
}
.heading-3 {
font-family: "MyBodyFont-SemiBold"; /* file name: MyBodyFont-SemiBold.otf */
}
.body-text {
font-family: "MyBodyFont-Regular"; /* file name: MyBodyFont-Regular.otf */
}
app-common.css:
.heading-1 {
font-size: 36;
font-weight: bold; /* Used by iOS, ignored by Android */
}
.heading-2 {
font-size: 24;
font-weight: bold; /* Used by iOS, ignored by Android */
}
.heading-3 {
font-size: 16;
font-weight: 600; /* semi-bold, Used by iOS, ignored by Android */
}
.body-text {
font-size: 14;
}
As I understand it, I could move all the font-weight styles into platform-ios.css, as Android font weights are controlled by the font-family declaration.
However, as I'm defining font-size for each class in app-common.css anyway, also defining the font-weight here makes more sense to me.
I tried to make custom fonts for my application in phonegap. For that, I wrote this code in my html file:
#font-face {
font-family: 'customfont';
src: url('fonts/BMitra.eot?#') format('eot'),
url('fonts/BMitra.woff') format('woff'),
url('fonts/BMitra.ttf') format('truetype');
font-style: normal;
}
body {
font-family: "customfont";
font-size:30px;
}
....
<body>
<h>Custom Fonts</h>
<div style="font-family: 'customfont';" id='txt1'>This is for sample</div>
</body>
It works fine on Ripple (chrome emulator) but it doesn't work on the Device (Samsung Android 4.1.2)
I have googled and stack-overflowed to find the solution, i found this post font-face on android 4.0.x doesn't work which says to have text-rendreing:auto but it didn't work too.
Any help, will be appreciated.
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
I have a custom font that will not work on Android devices but works in chrome and Firefox and IE 11.
On the server I have 2 font files called:
Ventilla Script_0.eot and Ventilla Script_0.ttf
I currently have the following in my css:
/* Fonts */
#font-face {
font-family: 'Ventilla Script';
src: url('../fonts/Ventilla Script_0.eot?') format('embedded-opentype');
}
#font-face {
font-family: Ventilla Script;
src: local(Ventilla Script_font), url('../fonts/Ventilla Script_0.ttf') format('opentype');
}
As far as I can tell that .tff rule should work on Android browsers, can anyone tell me what I might need to add.
Thanks
Ian
You should use Squirrel font generator
It worked for me on android devices.
I had tried Squirrel font generator but I must have pasted something wrong, however after asking this question I found this link
http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
now my css looks like this
#font-face {
font-family: 'Ventilla Script';
src: url('../fonts/Ventilla Script_0.eot?#iefix') format('embedded-opentype'),
url('../fonts/Ventilla Script_0-webfont.woff') format('woff'),
url('../fonts/Ventilla Script_0.ttf') format('truetype'),
url('../fonts/Ventilla Script_0-webfont.svg#svgVentilla Script') format('svg');
}
and it works on my phone and Galaxy Tab 3
Cheers
Ian
I am making an android app in phonegap, It contains arabic and english text. I am also using arabic font, and changing fonts is working fine, in web browser the arabic text looks fine but in android device "HTC One V" that i am using for testing is not displayed as it should be, the file is saved in UTF-8 . Can any one please tell me how can I display Arabic text properly in phonegap. Thanks
بِسْمِ اللَّهِ الرَّحْمَٰنِ الرَّحِيم
<li class="arabic">ٱللَّهُ لَآ إِلَـٰهَ إِلَّا هُوَ ٱلۡحَىُّ ٱلۡقَيُّومُۚ لَا تَأۡخُذُهُ ۥ سِنَةٌ۬ وَلَا نَوۡمٌ۬ۚ لَّهُ ۥ مَا فِى ٱلسَّمَـٰوَٲتِ وَمَا فِى ٱلۡأَرۡضِۗ مَن ذَا ٱلَّذِى يَشۡفَعُ عِندَهُ ۥۤ إِلَّا بِإِذۡنِهِۦۚ يَعۡلَمُ مَا بَيۡنَ أَيۡدِيهِمۡ وَمَا خَلۡفَهُمۡۖ وَلَا يُحِيطُونَ بِشَىۡءٍ۬ مِنْ عِلۡمِهِۦۤ إِلَّا بِمَا شَآءَۚ وَسِعَ كُرۡسِيُّهُ ٱلسَّمَـٰوَٲتِ وَٱلۡأَرۡضَۖ وَلَا يَـُٔودُهُ ۥ حِفۡظُهُمَاۚ وَهُوَ ٱلۡعَلِىُّ ٱلۡعَظِيمُ <span class="ui-li-count">١</span></li>
</ul>
and here is my css for arabic font
/*custom arabic fornt*/
#font-face {
font-family: "customfont";
src: url(../../../fonts/ar-Othmani.ttf) format("truetype");
}
.arabic {
margin: 0;
-webkit-touch-callout: none; /*prevent callout to copy image, etc when tap to hold*/
-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
font-family: "customfont" !important;
font-size:25px;
font-weight: normal !important;
}
I'm currently developing an android web browser. There has some pages used other character like Uighur character, and they display unnormally, so I used the following code to resolved this problem.
String htmlStr = getHTML(url, "UTF-8");//get the html content from the url
String tmp="<link href=\"file:///android_asset/myfont.css\" rel=\"stylesheet\" type=\"text/css\" />";
if(htmlStr.contains("</head>")){
htmlStr = htmlStr.replace("</head>", tmp);//add my css into the page
}
mCurrentWebView.loadDataWithBaseURL(url, htmlStr,"text/html", "utf-8", "");//display the page content
This is myfont.css：
#font-face { font-family: MyCustomFont; src: url("fonts/ALPEKRAN.TTF") }
body {font-family: MyCustomFont, Verdana, Arial, sans-serif; text-align:right;}
The ALPEKRAN.TTF font is under the folder of assets/fonts/.
But there have another problem like that page css losed.
Please, give me some suggession.
May you need to specify the full font url, try:
src: url("file:///android_asset/fonts/ALPEKRAN.TTF")