I am using the following CSS for #font face. It works on my desktop and the IOS devices that I have tested. But it fails on Android:
#font-face {
font-family: 'ReformaGroteskMedium';
src: url('/css/fonts/reforma_grotesk/26890C_0_0.eot');
src: url('/css/fonts/reforma_grotesk/26890C_0_0.eot?#iefix') format('embedded-opentype'),
url('/css/fonts/reforma_grotesk/26890C_0_0.woff') format('woff'),
url('/css/fonts/reforma_grotesk/26890C_0_0.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
I noticed that the fonts generated from http://www.fontsquirrel.com/ (which work) are embeded in exactly the same way except they also have the following line:
url('SourceSansPro-ExtraLightIt-webfont.svg#SourceSansProExtraLightItalic') format('svg');
Is this why my version isn't working, does Android only support SVG?
The version of Android I am using is 4.0.1 on a Asus tablet. It did work fine on a newer Android phone.
Quoting the Moz Dev Network from THIS ARTICLE:
When SVG was specified support for web fonts was far from being
expected. Since the correct font is however crucial for the rendering
of a graphic, it was decided to add a font description technology to
SVG. It was not meant to concur with other formats like PostScript or
OTF, but as a simple means of embedding glyph information for
rendering engines.
So i guess that SVG (Scalable Vector Graphics) format should always be used as a "parachute" for allowing any browser/device engine to render fonts correctly.
Anyways i didn't find anything official about Android 4.0.1 and font importing, but i strongly suggest to always use also SVG format when importing a Font.
You might be facing this Android bug:
https://code.google.com/p/android/issues/detail?id=73945
According to them it is fixed on Android 4.4 but not on previous versions :(
Related
I have implemented a website using AngularJs. I used several fonts including cambria and calibri using font-family, The fonts are working perfect on Webiste and even on Ios Mobiles (Safari browser) however the same is not working on any Android device i have checked for all android versions and browsers
i have used
font-family : cambria
in css.
Any help will be appreciated. Thanking you.
Android devices generally don't have the font Cambria installed on their systems, so the Android browsers can't display text with this font.
You can use a CSS font stack so that if one font is not installed the browser will try to use the next one:
font-family: Cambria, Georgia, serif;
Or you can look at Web Fonts.
On your website, put the font Cambria at a url like /cambria.ttf. Then you can use it in CSS like:
#font-face {
font-family: 'MyCambria';
src: url('webfont.ttf') format('truetype');
}
Now use
font-family: Cambria, 'MyCambria', serif;
I have some pretty weird problems in the Android browser on my Medion Lifetab S7852 (Android 4.4.2 - made by Lenovo as far as I know) when using self-hosted webfonts:
Step 1:
First of all, caniuse.com clearly states that the Android browser supports TTF since Android 2.2 (http://caniuse.com/#feat=ttf) and WOFF since Android 4.4 (http://caniuse.com/#feat=woff). So using #font-face with the following syntax should work just fine (different font formats generated by Font Squirrel's generator (http://www.fontsquirrel.com/tools/webfont-generator)):
#font-face
{
font-family:'daniel';
src: url('../webfonts/daniel-webfont.eot');
src: url('../webfonts/daniel-webfont.eot?#iefix') format('embedded-opentype'),
url('../webfonts/daniel-webfont.woff2') format('woff2'),
url('../webfonts/daniel-webfont.woff') format('woff'),
url('../webfonts/daniel-webfont.ttf') format('truetype');
font-weight:normal;
font-style:normal;
}
I implemented a demo of this here: http://www.sym-work.de/wf/example01
This works fine in the Android browser of my Samsung Galaxy S Advance (Android 2.3.6), the Android browser of my Galaxy S4 (Android 5.0.1), Chrome 44, Dolphin 11.4, Firefox 40 and Opera 30 on my Lifetab S7852 (Android 4.4.2), Safari on my iPhone 4S and my iPad 2 (both iOS 8.4.1) and in pretty much every single half-way up-to-date browser on Windows and Linux.
It will however not work in the Android 4.4.2 browser and Maxthon 4.5.1.2000 on my Lifetab (it seems Maxthon is basically just an alternate GUI for the system's Android browser?). It won't use the specified font and fall back to sans-serif.
What confuses me the most is that it works perfectly well on my stone age Android 2.3 phone, but not on Android 4.4 on a different device...
Step 2:
Adding an SVG font at the end, which according to all sources shouldn't be necessary:
#font-face
{
font-family:'daniel';
src: url('../webfonts/daniel-webfont.eot');
src: url('../webfonts/daniel-webfont.eot?#iefix') format('embedded-opentype'),
url('../webfonts/daniel-webfont.woff2') format('woff2'),
url('../webfonts/daniel-webfont.woff') format('woff'),
url('../webfonts/daniel-webfont.ttf') format('truetype'),
url('../webfonts/daniel-webfont.svg#danielregular') format('svg');
font-weight:normal;
font-style:normal;
}
Demo here: http://www.sym-work.de/wf/example02
This kind of works - the font is rendered, however it suffers from heavy FOIT (Flash Of Invisible Text, "flickering") in the Android 4.4.2 browser. Every time I change the page through the menu on the left side, all the text is invisible for at least half a second (sometimes longer) on every load. I would expect that to happen when first loading the site, as it might take the browser some time to download the font, however after that it shouldn't happen again, as I expect the font file to be cached.
Step 3:
I alter the order of the font sources and put the SVG at the second position:
#font-face
{
font-family:'daniel';
src: url('../webfonts/daniel-webfont.eot');
src: url('../webfonts/daniel-webfont.svg#danielregular') format('svg'),
url('../webfonts/daniel-webfont.eot?#iefix') format('embedded-opentype'),
url('../webfonts/daniel-webfont.woff2') format('woff2'),
url('../webfonts/daniel-webfont.woff') format('woff'),
url('../webfonts/daniel-webfont.ttf') format('truetype');
font-weight:normal;
font-style:normal;
}
Demo here: http://www.sym-work.de/wf/example03
The font is rendered, no FOIT at all, the Android 4.4.2 browser pretty much behaves like all the other browsers.
However that's not an acceptable solution for me: The SVG's file size is significantly larger than the WOFF's and TTF's - I don't want to tell browsers (that (still) support SVG fonts) that their first choice should be downloading the largest file.
I thought it might have something to do with missing/wrong MIME types, so I added:
AddType application/font-woff .woff
AddType application/vnd.ms-fontobject .eot
AddType application/octet-stream .ttf
AddType image/svg+xml .svg
to an .htaccess for the Apache. No change at all.
Furthermore, all Google Font specimens I've tried (for example https://www.google.com/fonts/specimen/Poiret+One) won't work and just show the default sans-serif font.
What is going on here? Why does my Android 4.4.2 browser need SVG fonts? Why does SVG need to be on top of the source list to prevent heavy FOIT/flickering on every load? Could this be caused by some kind of weird Android implementation by Medion/Lenovo?
Can someone reproduce/confirm this problem on Android 4.4.2 (and/or 4.0/4.1/4.2/4.3)? It would also be very helpful telling me if you don't experience that problem and my first example works fine in the Android browser on your specific device, renders the font and doesn't flicker at all. I googled around a lot, but couldn't find anything helpful. Is this some weird bug that for some reason only I experience?
Thanks in advance!
I'm trying to make a web app without the use of web fonts to keep browser requests at an absolute minimum.
At the same time, I'm trying to use only "good-looking" slim fonts for Headings etc.
This is basically no problem: iOS and Mac OS have HelveticaNeue-UltraLight natively, and Windows (Phone) has Segoe UI (WP) Light.
The fonts do not look the same, but they give a similar overall style and I don't have to use a single webfont. All can be addressed directly via css "font-family".
Is there a way to get a similar appearance on Android? Android has Roboto Light, which would perfectly serve my requirements, but it seems impossible to simply address this via css styles without webfonts.
You can use
font-family: "HelveticaNeue-UltraLight", "Segoe UI", "Roboto Light", sans-serif;
Each OS try use font from this list in course. When the browser finds a font that is present in the system, it will start to use it. iOS will use the font "HelveticaNeue-UltraLight" and ignore other. Android will use the font "Roboto Light" ...
Use:
font-family: sans-serif-light;
Edit: Apparently, this only works on HTC devices. But it's a start.
Edit2: Looks like Google has changed this with the recent Android 4.4 update, because now it works on my Nexus 7 as well. Not sure about other devices though.
Download Roboto and link to it in css like this:
#font-face {
font-family: 'Roboto Thin';
src: url('roboto/Roboto-Thin.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
I have recreated the problem I'm having using CSS font-family and Chrome for Android. The web browser does not inherit fonts correctly, and, instead, uses the fallback font.
http://jsbin.com/iyifah/1/edit
This appears to be a bug already ticketed on Google ( http://code.google.com/p/chromium/issues/detail?id=138257 ).
Adding <meta name="viewport" content="width=device-width, initial-scale=1" /> to the HTML is supposed to fix the problem, but this only fixes the problem for the set font for the first element.
The JS Bin link will help explain what I am talking about. So, if anyone has Chrome for Android, go to the link to see what I am talking about!
Thanks.
My solution to the problem is to ditch Google Webfonts completely and, instead, download the fonts to the web server and call them through CSS, like so:
#font-face {
font-family: 'Droid Sans';
src: url('fonts/DroidSans-webfont.eot');
src: url('fonts/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/DroidSans-webfont.woff') format('woff'),
url('fonts/DroidSans-webfont.ttf') format('truetype'),
url('../fonts/DroidSans-webfont.svg#DroidSansRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Google's webfonts are open source, so we should have no problem finding the downloads for the fonts.
This solution works in both Dolphin and Chrome for Android.
I also noticed this today. Not just on my Nexus 7 (Android 4.2.2), but also in Chrome for MacOS X on a friend's MacBook Pro. Not that much of a problem, since I usually opt to convert the fonts I need via fontsquirrel.com, but for testing and prototyping integrating the fonts directly from Google is much more convenient.
EDIT 1: Apparently, I don't have enough reputation to post images yet, so I had to externally link them.
EDIT 2: Apparently, I don't have enough reputation to post more than two hyperlinks, sorry for the inconvenience of having to copy and paste a URL.
Built a site (http://vitkodance.com) for a friend, and used the #font-face implementation of a Google Web font. I then invoked the fonts with a series of fallbacks. Titles are in a script-ish style, and the body is serif-ish. When I load up the website on Chrome for Android on my phone, the fonts render differently, depending on the orientation of the phone (and therefore the available resolution).
Here is the site in portrait (fallback font): Chrome for Android Portrait Rendering.
And here is the site in landscape (intended): Chrome for Android Landscape Rendering.
On my Nexus 7 tablet, the font displays as intended in both orientations. Is there a way to fix this? Is this expected behavior based on the fonts that I chose, or is it an issue that has to deal with values for font size (in em's) and line height?
I am having the same problem and asked a similar question.
Currently, this is a bug being tracked here http://code.google.com/p/chromium/issues/detail?id=138257
Chrome for Android displays the fallback font, but Dolphin browser displays the correct font, at least on my devices. So this seems to be a Chromium bug.
For some people, defining an initial scale fixes the problem, like so:
<meta name="viewport" content="initial-scale=1">
Also adding -webkit-text-size-adjust:100% to your CSS could fix the problem as well.
I wish I had a definitive answer, but it seems there is none. Let me know how it goes.
Edited Answer:
My solution to the problem is to ditch Google Webfonts completely and, instead, download the fonts to the web server and call them through CSS, like so:
#font-face {
font-family: 'Droid Sans';
src: url('fonts/DroidSans-webfont.eot');
src: url('fonts/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/DroidSans-webfont.woff') format('woff'),
url('fonts/DroidSans-webfont.ttf') format('truetype'),
url('../fonts/DroidSans-webfont.svg#DroidSansRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Google's webfonts are open source, so you should have no problem finding the downloads for the fonts.
This solution works in both Dolphin and Chrome for Android.