I'm trying to use #font-face in a mobile web application, and it's not working on Chrome for Android.
It IS working on the following:
Safari on iOS
Default Android browser
Safari on OSX
Chrome on Windows
Firefox on Windows
IE11 on Windows
Here's the code I'm using:
#font-face {
font-family: 'liat';
src: url('../fonts/liat_3.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
I'm using the Remote Debugging (https://developers.google.com/chrome-developer-tools/docs/remote-debugging) to debug this, and it doesn't appear that there are any errors.
Here's the part I really don't understand...
If I go to the Network tab in the Developer Tools - it does not appear that Chrome attempts to download the font (i.e., there's NO network call to load the font)
Compare that to what I see in Chrome on a desktop (Windows and OSX) - you can see that the font IS loaded:
Also - if I go to the Resources tab - it does not show any fonts.
Compare that to what I see in Chrome on the desktop:
Bottom line - on Chrome on the desktop (and mobile Safari on iOS) - the web font is loaded and displayed. However, on Chrome on Android - the web font isn't even loaded, let alone displayed.
Any help or advice is much appreciated!
OK - so I found the answer. Perhaps this won't be surprising to many...
Long story short - the web fonts were only used on certain divs that, initially, were set to display: none.
It looks like most other browsers will automatically download the web font, even though the divs that display them are not shown. However, it looks like Chrome on Android doesn't download them.
To make matters worse - if I later change the display of those divs to something visible (e.g., dislay: block) - Chrome STILL DOESN'T download them - they're simply not displayed.
In other words - the fonts must be included in an element that's initially included in the render tree, otherwise they won't ever be downloaded.
To fix this - I included the fonts on temporary div with visibility:hidden - this forced Chrome to download the font.
Hope this helps someone avoid the same problem that stumped me.
Related
I have a strange issue which Chrome.
I've defined my font-family like this:
font-family: Tahoma,Helvetica neue,Helvetica,Arial,sans-serif;
This works just fine in all browsers on Mac,Windows,iOS and Android. Excpet of Google Chrome in Android.
Via remote debuggin, I figured out that Chrome renders the font Roboto. I have absolutly no idea why this is happening, since I never used this font in my CSS.
Does anyone know why Chrome is doing this? Alle other browsers are using Tahoma but Chrome uses Roboto without any particular reason.
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!
My personnal website is all messed up when i display it on Android devices.
I've tested my site on all major browsers on Windows and Mac OS X:
- IE7 to IE10
- Chrome
- FireFox
- Opera
- Safari
And they all display my website correctly.
I've also tested on some Apple devices and they also display correctly.
But I've tried on a Nexus 4 and a Nexus 7 and the layout is all messed up.
The page is all zoomed out and the menu seems to be outside the viewport.
I'm lost here and any help would be appreciated.
http://www.narcissusphoto.com/
You need to add media queries in your css to look your website for mobile devices. Please refer the below link and accordingly you need to make changes in css.
http://webdesignerwall.com/tutorials/responsive-design-in-3-steps
Try removing the fixed background on the body element.
I am doing :
<div class="testing"
style="font-family: Carrington,'Black Rose', Champagne, 'England Hand'">testing</div>
All these families are embedded using #font-face. While Chrome on Windows and Linux loads all the font families mentioned in the fallback(checked via the network load option in the console), it does not do so on the Android tablet(this was checked as I created further divs after this one with font families Black Rose and witness the FOUT issue on chrome).
Is this the universal behaviour of Chrome on Android that it will load only the first family found and neglect the others?
The reason it only loads the first font-family found is because it found it.
The reason you would add more fonts to the font family is for the "just in case" possibility that the preferred font is not found. That is why most font-familys look like:
font-family: 'Trebuchet MS', Verdana, Arial, sans-serif;
Browser Interpretation:
If the computer browser doesn't have the "Trebuchet MS" font then load Verdana. If it doesn't have Verdana then load Arial. If for some odd reason Arial isn't a choice then load the default sans-serif font.
What is really bizarre about this is not the way the font family functions. I think most people understand how that works.
What's really weird is when you are using a common system font like trebuchet ms that IS on the system, but the browser can't find it.
I've had this problem with Trebuchet. For some inexplicable reason, on my Android phone, my regular browser has no trouble with it, but Chrome can't do it.
The font is there. But Chrome can't see it.
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.