I am quite new (read absolute beginner) to mobile development using hybrid framework. For my first project I decided to use the Supersonic framework by AppGyver. The problem occured, when I wanted to change the font of title in navigation bar. Here's what I tried:
I put downloaded font-related files into folder appName/app/common/assets/fonts.
Afterwards I created a stylesheet, that contains "custom" font definition:
#font-face {
font-family: 'ralewaybold';
src: url('/fonts/raleway-bold-webfont.eot');
src: url('/fonts/raleway-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/raleway-bold-webfont.woff2') format('woff2'),
url('/fonts/raleway-bold-webfont.woff') format('woff'),
url('/fonts/raleway-bold-webfont.ttf') format('truetype'),
url('/fonts/raleway-bold-webfont.svg#ralewaybold') format('svg');
font-weight: normal;
font-style: normal;}
saved it into raleway.css (here, I need to say, that I tried to put this code into android.css and application.css files, but none of those worked.)
Finally, I wanted to change the font of navigation bar title of default application (created by steroids create appName) by editing
navigation-bar title {
...
font-family: "ralewaybold";}
but nothing happenned.
As I said in beginning I am quite new to hybrid development (and stuff around it), so I will appreciate very much, if you'd advice anything that would help me.
I also had some trouble with Fonts in Android like yours. Simply as that: some Fonts work some dont and it doesnt matter if it is ttf or somewhat else supported.
You can jsut check if it doesnt work with other fonts. If one Font doesnt work Android just uses the default font Android Sans...
Related
I recently built a comics website at www.pipanni.com that uses the "Comic Sans" font. Everything is ok so far, except that the font is not showing on my Samsung Galaxy mobile phone. It shows something that looks like Arial.
I've already tried every clear history / cache, etc.
Here's my styles font:
body
{
font-family: "comic sans ms", "comic sans", "Comic Sans", arial, helvetica, tahoma, verdana;
font-size: 18px;
color: #000000;
}
The home page's title is working ok on my laptop (and every other computer I've tested the website on), but not on my smartphone.
I don't have an iphone, but I think it is working ok on those.
What can I try next?
P.S: This is a comics website, it's supposed to use "Comic Sans"! :)
I just found the simple solution for this, you just need to override the font file using font face like so:
#font-face {
font-family: 'Comic Sans MS';
src: url("comic-sans-ms/comici.ttf");
}
and HTML code
<h1 style="font-family: 'Comic Sans MS';">Comic sans</h1>
What happen is browser will override the default font file by using your file. In any devices, the browser will download comici.ttf and render the same font.
p/s: font file you can download from here https://www.wfonts.com/font/comic-sans-ms
To display a font, the device must have this font installed. If not, it uses the fallback you gave to it ( here Arial).
If you want to include a specific font, you can user websites like google font or you could use #Font-face ( look here : http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp )
But be aware that you need the rights to use and install that font.
checkout out font-squirrel. They have an app that will allow you to change a font like comic sans into an embedded font. Very handy for ensuring your look is consistent across all devices.
https://www.fontsquirrel.com/tools/webfont-generator
Go to expert settings and choose base64encode.
It will create a css file that has the embedded font which you include on your css.
Hello Stackoverflow—to make what I'm asking about more clear, I'll elaborate.
I'm using the following symbols in a rotation transformation: ☎ and ♦ and ✔
(☎ and ♦ and ✔ respectively).
On my android device though (smart phone, LG G4), it replaces these text symbols with non-text picture emojis that do not format with my transformation or font size styles.
I want to force the browser to use the regular symbols in the font that I have supplied on my website (using #font-face with an included .ttf file). On desktops, I have no issues at all displaying my selected symbols as intended.
Your help is greatly appreciated as I'd rather not be forced to make an image substitute of my text arrangement. Thank you.
You should include a webfont with support for the characters you want to use.
To include an icon font in your CSS, use the following code :
#font-face {
font-family: 'myfont';
src:url('fonts/myfont.eot?-td2xif');
src:url('fonts/myfont.eot?#iefix-td2xif') format('embedded-opentype'),
url('fonts/myfont.woff?-td2xif') format('woff'),
url('fonts/myfont.ttf?-td2xif') format('truetype'),
url('fonts/myfont.svg?-td2xif#myfont') format('svg');
// Different URLs are required for optimal browser support
// Make sure to :
// 1) replace the URLs with your font's URLs
// 2) replace `#myfont` with the name of your font
font-weight: normal; // To avoid the font inherits boldness
font-style: normal; // To avoid font inherits obliqueness or italic
}
.emoji {
font-family: 'myfont', Verdana, Arial, sans-serif; // Use regular fonts as fallback
speak: none; // To avoid screen readers trying to read the content
font-style: normal; // To avoid font inherits obliqueness or italic
font-weight: normal; // To avoid the font inherits boldness
font-variant: normal; // To avoid the font inherits small-caps
text-transform: none; // To avoid the font inherits capitalization/uppercase/lowercase
line-height: 1; // To avoid the font inherits an undesired line-height
-webkit-font-smoothing: antialiased; // For improved readability on Webkit
-moz-osx-font-smoothing: grayscale; // For improved readability on OSX + Mozilla
}
You can then include your symbol like this:
<span class="icon">☎</span>
<span class="icon">✉</span>
If you don't know a webfont that supports your character, you can easily create one yourself using the Icomoon App. See also my open source Emoji icon font for an example of an Icon font with support for 650 symbols, which I created with the Icomoon App.
If you plan on using my Icon font (or any other icon font), I would recommend that you edit the font in the Icomoon app to remove all symbols except the ones you need, as that would reduce your filesize significantly!
More info:
Create webfont with Unicode Supplementary Multilingual Plane
symbols
I have html content (combined Persian an English text) with attached css, all css style applied correctly but font.
The css have fontface like this:
#font-face{
font-family: 'BYekan';
font-weight: normal;
font-style: normal;
src: url(../Fonts/BYekan.ttf);
}
the font only applied to english text and not the persian. the font is a standard ttf persian font (BYekan.ttf) so nothings wrong with it.
I googled a lot and almost every body said it's a bug in WebView android > 3.0, the problem still exist in android 4.
https://code.google.com/p/android/issues/detail?id=38536
https://groups.google.com/forum/#!topic/persian-computing/4Fm7JfiOkJk
The only workaround that I found is using svg fonts instead, but this does not work for me either.
Custom font for webview
So how can I solve this?
note1: this question probobly asked alot, like this:
Persian #font-face doesn't work in Chrome, Bug or not?
but it's an old question and the given advice not working anymore (at least for me).
note2: When I open the page in chrome desktop browser font applied correctly.
i have found the workaround
try these font faces
#font-face {
font-family: 'yekan’;
src:url('fonts/yekan.eot?#’) format(‘eot’),
url('fonts/yekan.woff') format('woff'),
url(‘fonts/yekan.ttf’) format(‘truetype’);
}
IMO use SVG font for persian language
I've converted the mentioned font in your question and uploaded it in the following Internet address:
bYekan Web Font Package
Also, You must use the following Style Lines:
#font-face {
font-family: 'BYekan';
src: url('../Fonts/byekan-webfont.eot');
src: url('../Fonts/byekan-webfont.ttf') format('truetype'), url('../Fonts/byekan-webfont.eot?#iefix') format('embedded-opentype'), url('../Fonts/byekan-webfont.woff') format('woff'), url('../Fonts/byekan-webfont.svg#BYekan') format('svg');
font-weight: normal;
font-style: normal;
}
and, you should add the following lines in the .htaccess file:
AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff
I have a simple line of text
<h4>This is just some placeholder junk</h4>
with the following CSS:
h4 {
font-size:20px;
color:#000000;
font-style:italic;
}
This is working in everything but the default browser on Android GS3.
I've tried wrapping the text in a span with font-style:italic;, as well as including <i> and <em> tags, but the font will not slant. Am I overlooking something simple here?
In terms of performance I would not recommend to use a custom font on mobile devices at all, unless there is really no other way. But this seems to be a problem caused by Samsung: https://code.google.com/p/chromium/issues/detail?id=169446#c11
So I think this is one of the rare situations where you should go with a custom font. Of course it should be a custom font that supports the italic font style. Don´t forget the font-styleproperty in the #font-face declaration.
#font-face {
...
font-style: italic, oblique;
}
I am trying to display phonetic symbols in a WebView, but so far I am only getting squares.
For instance, for the word "apostrophe", this should be displayed:
əˈpåstrəfi
but all I am getting on the display is:
□□påstr□fi
If it would help, I am getting the strings from an SQLite database. The string I retrieve has some HTML tags in it, so I use this:
webView.loadDataWithBaseURL("file:///android_asset/",
article, "text/html", Encoding.UTF_8.toString(), null);
where I have my CSS files in /assets. And the article variable contains some text enclosed in HTML tags.
I've resolved problem to display phonetic symbols in TextView. The problem is the default android fonts are not implement IPA symbols. I can advise to use ccs like this
#font-face {
/* Regular */
font-family: "ConstructiumRegular";
src: url("http://openfontlibrary.org/content/RebeccaRGB/412/Constructium.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-variant: normal;
font-stretch: normal;
}
In me case mentioned Constructium.ttf fits.
If you pick up a unicode font like Gentium,
and you make sure you can change your font with a utility like this, you should be good to go. I don't have an Android, so there may be issues surrounding types of fonts that can be installed. You may need to check into that, or the font install utility that I've cited may not work well for you. ymmv