I'm using a custom font I found on Google Fonts for the heading tags in a site I'm working on. It works fine in Chrome for Windows using any of the methods described in the Getting Started guide. However, the font wouldn't render in Chrome for Android, in fact it doesn't even fall back to my secondary choice which is 'Impact' and is considered 'web safe.' So I downloaded it locally, converted it to every relevant format, and using this guide on #font-face produced the following CSS which did not solve the problem:
#font-face {
font-family: 'Oswald';
src: local('assets/fonts/Oswald-Regular.eot?#iefix') format('embedded-opentype'),
local('assets/fonts/Oswald-Regular.woff2') format('woff2'),
local('assets/fonts/Oswald-Regular.woff') format('woff'),
local('assets/fonts/Oswald-Regular.ttf') format('truetype'),
local('assets/fonts/Oswald-Regular.svg#Oswald') format('svg');
src: url('https://fonts.googleapis.com/css?family=Oswald') format('truetype');
}
Then I found a solution using media queries and produced the following CSS, which also did not work:
#media only screen and (max-width: 320px) {
#font-face {
font-family: 'Oswald';
src: local('assets/fonts/Oswald-Regular.svg#Oswald') format('svg');
}
}
#media only screen and (max-device-width: 720px) and (orientation:portrait) {
#font-face {
font-family: 'Oswald';
src: local('assets/fonts/Oswald-Regular.svg#Oswald') format('svg');
}
}
#media only screen and (max-device-width: 1280px) and (orientation:landscape) {
#font-face {
font-family: 'Oswald';
src: local('assets/fonts/Oswald-Regular.svg#Oswald') format('svg');
}
}
In both solutions I'm using the following simple CSS to use the font:
h1, h2, h3, h4, h5, h6 {
font-family: "Oswald", "Impact", "Charcoal", sans-serif;
}
This is becoming quite the thorn in my side and it's holding me up because I can't present it to the customer until the prototype works on mobile. Any help would be enormously appreciated. Thanks!
Generate your font face using https://www.fontsquirrel.com/tools/webfont-generator. It'll give you everything ready made, you have to just put it in the right place.
But I also think #font-face don't work with Opera Mini 8
Related
For my client I'm building an website using the Times New Roman font.
Everything seems to work fine, except for Android devices (mobile, tablet). Android doesn't have a Times New Roman font available. As far as I know you can only use the Droid Serif font, which has a different look than Times. Besides that the font-size also differs and causes a lot of alignment issues.
Is there any way to use Times New Roman for Android? I know about fontface, but there isn't any free webfont available for Times New Roman. Maybe there's an (acceptable)equivalent for it?
Thanks in advance!
CSS
#font-face {
font-family: 'Times New Roman';
src: url(LiberationSerif-Regular.ttf) format('truetype');
}
#font-face {
font-family: 'Times New Roman';
src: url(LiberationSerif-Italic.ttf) format('truetype');
font-style: italic;
}
#font-face {
font-family: 'Times New Roman';
src: url(LiberationSerif-Bold.ttf) format('truetype');
font-weight: bold;
}
#font-face {
font-family: 'Times New Roman';
src: url(LiberationSerif-BoldItalic.ttf) format('truetype');
font-style: italic;
font-weight: bold;
}
Download the Liberation Serif .ttf font, unzip and move files to webroot.
you could change the #font-face source urls and move your fonts wherever you want.
We're coding an Android app using fontawesome icons. Our app works fine with fontawesome icons on iOS but nothing for Android. I tried all sorts of online fixes and none of them worked, and I really don't feel like creating a few hundred different PNG's for each screen resolution.
What do I do? I can't do this: How to use icons and symbols from "Font Awesome" on Native Android Application
The way we're defining it (fontawesome.css):
#font-face {
font-family: 'FontAwesome';
src: url('fonts/fontawesome/fontawesome-webfont.eot?v=3.2.1');
src: url('fonts/fontawesome/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('fonts/fontawesome/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('fonts/fontawesome/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('fonts/fontawesome/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
font-weight: normal;
font-style: normal;
}
With all of our fonts in fonts/fontawesome.
Not a single clue on how to get this working on Android..
try to remove the version paramter ?v=3.2.1
src: url('fonts/fontawesome/fontawesome-webfont.eot');
some old webkit can't recognize the url with paramaters
I currently have an app with a webview. The webview loads css that determines the specific font each devices should use.
For my iOS devices I use HelveticaNeue CondensedBold since it is included with iOS5+. Since I cannot use this for earlier iOS and Android since it is not a system font I am using Googles OpenSans-CondensedBold.
The issue I am running into is on Android devices using 2.3.X. The font-family fallback is not working at all. Since the HelvelticaNeue font isn't present it just fails and doesn't fallback to the OpenSans which is next in line.
font-family: 'OpenSans-CondensedBold', 'Helvetica', 'Arial';
If I remove the HelveticaNeue-CondensedBold from the css in the above example, the OpanSans font works on the Android perfectly.
Current CSS Below.
#font-face {
font-family: 'OpenSans-CondensedBold';
src: url('/webfonts/opensans-condbold.eot');
src: url('/webfonts/opensans-condbold.eot?#iefix') format('embedded-opentype'),
url('/webfonts/opensans-condbold.woff') format('woff'),
url('/webfonts/opensans-condbold.ttf') format('truetype'),
url('/webfonts/opensans-condbold.svg#OpenSans-CondensedBold') format('svg');
font-weight: normal;
font-style: normal;
}
body {
font-size: 13px;
font-family: 'HelveticaNeue-CondensedBold', 'OpenSans-CondensedBold', 'Helvetica', 'Arial';
font-weight: normal;
font-style: normal;
}
you could try to encode the font file as base64 data uri.. sencha touch 2 is doing this also and it seems to work.
to do this upload your font file here http://dopiaza.org/tools/datauri/index.php
then use the generated code in your CSS like this
#font-face {
font-family: "My Font";
src: url(data:application/x-font-woff;base64,[base-encoded font here]) format('woff'),
url(data:image/svg+xml;base64,[base-encoded font here]) format('svg'),
url(data:application/x-font-ttf;base64,[base-encoded font here]) format('truetype');
}
in case you're using compass, it appearantly has has a method to encode the font file on the fly
there's a related question also to this method
I implemented an application in Android with PhoneGap. So UI is implemented with jQuery Mobile.
I used CSS font-face for giving custom font to application texts.
#font-face {
font-family: "MyFont";
src: url("../fonts/MyFont.ttf") format("truetype"),
src: url("../fonts/MyFont.otf") format("opentype");
}
body {
font-family: MyFont;
}
But when I install the application on Android, texts are shown by default font face.
How can I solve this problem in Android?
This is a correct syntax that works on android phones:
#font-face {
font-family: 'yanone';
src: url('fonts/yanone/YanoneKaffeesatz-Regular-webfont.eot?') format('eot'),
url('fonts/yanone/YanoneKaffeesatz-Regular-webfont.woff') format('woff'),
url('fonts/yanone/YanoneKaffeesatz-Regular-webfont.ttf') format('truetype'),
url('fonts/yanone/YanoneKaffeesatz-Regular-webfont.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;
}
You should also be careful about relative path to your custom font.
I've been using Pictos and FontSquirrel for fancy dancy icons and typography on our web app. Today I saw that Droid phones and Android 2.3.4 (running on VirtualBox) does not display the font face at all. For the record, Google's own web fonts DO display properly.
Is there a known work around?
#font-face {
font-family: 'Pictos';
src: url('pictos-web.eot');
src: local('☺'), url('pictos-web.woff') format('woff'), url('pictos-web$
font-weight: normal;
font-style: normal;
}
Be advised that the bulletproof and bulletproof smiley methods you're using do not work on Android phones.
Try the Fontspring syntax.
Example:
#font-face {
font-family: 'Pictos';
src: url('pictos-web.eot');
src: url('pictos-web.eot?#iefix') format('embedded-opentype'),
url('pictos-web.woff') format('woff'),
url('pictos-web.ttf') format('truetype'),
url('pictos-web.svg#UbuntuBold') format('svg');
font-weight: normal;
font-style: normal;
}
If eliminating the smiley syntax doesn't work... some browsers on android are rejecting "web-only" fonts. You can run them through the fontsquirrel generator without protection and use the unprotected woff file.