New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 138257 link

Starred by 31 users

Issue metadata

Status: Fixed
Owner:
no longer working on chrome
Closed: Nov 2012
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Android
Pri: 2
Type: Bug

Blocked on:
issue 137206



Sign in to add a comment

Android Chrome font zoom breaks web fonts

Reported by s...@typekit.com, Jul 20 2012

Issue description

Chrome Version: 18.0.1025.166
Application Version (from "Chrome Settings > About Chrome"): Chrome 18.0.1025123
URLs (if applicable):
http://seanmcb.com/typekit/2012.07.19-android-chrome-zoom/test.html
http://seanmcb.com/typekit/2012.07.19-android-chrome-zoom/control.html

From "Android Settings > About Phone/Tablet"
Build number: JRO03C
Device: Galaxy Nexus

Behavior in Android Browser (if applicable):
The auto-font-size-adjust feature in Chrome that makes "content" text bigger when the layout is wide breaks the appearance of @font-face defined web fonts. Instead of appearing in the web font when zoomed, the text appears in a default fallback font instead. Text that is not zoomed displays web fonts just fine.

Steps to reproduce:
1. Load the test page in Android Chrome - http://seanmcb.com/typekit/2012.07.19-android-chrome-zoom/test.html
2. Observe that the text is rendered in a fallback font instead of the web font.
3. Load the control page in Android Chrome, which differs only in that it has a viewport meta tag with width=device-width defined - http://seanmcb.com/typekit/2012.07.19-android-chrome-zoom/control.html
4. Observe that the text is rendered in the web font as defined.

Expected result:
Text should be rendered in the web font even when the font size is adjusted because of zooming. Zooming the text shouldn't change the font.

Actual result:
Zooming causes the font to change to a fallback font as well. This breaks the appearance of many web pages that have fonts and has become a serious problem for Typekit customers.

Attachments:
I've attached screenshots of the test and control pages in both Android's Chrome browser as well as the default browser app for comparison.
 
chrome-control.png
88.2 KB View Download
browser-test.png
59.9 KB View Download
chrome-test.png
120 KB View Download
browser-control.png
95.4 KB View Download

Comment 1 by s...@typekit.com, Jul 20 2012

This may be the same issue as http://code.google.com/p/chromium/issues/detail?id=137206, but I had more detail on the cause of the bug as well as a test case, so I wanted to submit separately.
Blockedon: chromium:137206
Cc: vinodkr@chromium.org joh...@chromium.org
Labels: Type-Bug Area-WebKit WebKit-Fonts Feature-TabContents
Status: Untriaged
Also reproducible on The Motorola Xoom (wifi only) with Android 4.0.4, but only when the device is in portrait mode.
Screenshot_2012-07-20-13-50-12.png
99 KB View Download
Screenshot_2012-07-20-13-50-55.png
86.2 KB View Download
Status: Available
Labels: -Feature-TabContents Feature-Mobile-Fontboosting

Comment 6 by Deleted ...@, Aug 21 2012

I also encountered this problem. I thought for the longest time I was doing something wrong in my css, but apparently not. 

Device is a nexus 7

persistent url is http://brmullikin.com/classical_texts/greek/aeschines/against_ctesiphon 

although the font is misconstrued on most all pages. The Greek is always skewed, and the Roman letters are sometimes inconsistent (compare the "J" in jump to paragraph).


Screenshot_2012-08-20-23-37-27.png
390 KB View Download
Screenshot_2012-08-20-23-37-15.png
577 KB View Download

Comment 7 by joh...@chromium.org, Aug 21 2012

Cc: -joh...@chromium.org
Owner: joh...@chromium.org
Status: Started
Web fonts seem to work fine in upstream webkit, so that'll hopefully resolve itself at some point in the future. Text with a ::first-letter pseudo-element (like the J that dissata was referring to) still behaves strangely; I've opened https://bugs.webkit.org/show_bug.cgi?id=94590 to track that issue.

Comment 8 by s...@typekit.com, Aug 21 2012

Wait, so to clarify, the solution to the "web fonts break when text zooming is applied by mobile Chrome" issue is to wait to see if it will hopefully resolve itself in the future? That doesn't seem right to me at all (or maybe I misunderstood what you were saying).

Web fonts *are* working fine in upstream webkit, which seems to suggest that the issue is with the text zooming feature in mobile Chrome (especially since web fonts only break when that text zooming feature is applied).

This is a *really* bad bug that's breaking most web fonts for all Android Chrome users right now. Anybody who didn't design their web page to render at the device width is having this text zooming applied, which is stripping any web fonts they might be using. It would be great to get this fixed ASAP, especially since there's nothing we can tell our users to work around it.
Android version 4.0.3 || Samsung Galaxy SII test results using the latest release of Chrome for Android. Google Webfonts // TypeKit webfonts, replaced with on Mobile Phones when fontsize is 16pts = 100% = 1em the text will ALWAYS appear in a default fallback font instead. No matter if you zoom or whatever. Please fix his. Started using Firefox mobile as a temporary alternative instead.

Comment 10 by s...@typekit.com, Nov 8 2012

Just checking in on this bug again. This is still not fixed in the latest release version of Chrome for Android, and it still means that web fonts don't show up at all on many web pages. :/
Labels: MobileOWP

Comment 12 by s...@typekit.com, Nov 9 2012

Turns out this bug is actually even more general than web fonts. When *any* unknown font name is used as the first font in a font stack, and text zoom is applied, then the very last fallback font in the stack is used (instead of the next fallback font that the device recognizes). Here's a case that generates this more general demonstration of the bug without any web fonts: http://seanmcb.com/typekit/2012.11.09-android-fallback.html

According to Paul Irish, this bug may already be addressed in the latest versions of Chrome Android. I just wanted to add this additional test case here for documentation.
Labels: Mstone-25
Status: Fixed
Thanks for the feedback. I can confirm that the latest (not yet shipped) versions of Chrome for Android render the fonts correctly on http://seanmcb.com/typekit/2012.07.19-android-chrome-zoom/test.html, http://goo.gl/XClbB and http://brmullikin.com/classical_texts/greek/aeschines/against_ctesiphon (except for the previously mentioned issue with ::first-letter - http://wkbug.com/94590), so this is going to improve once we ship that.
 Issue 137206  has been merged into this issue.
This web font problem also seems to be an issue even with viewport meta tag with width=device-width defined. I've put up a test case here:

http://stephen-young.me.uk/nexus_test.html

On Chrome on the Nexus in a portrait orientation the web font doesn't render for the anchor element and the list item. If you switch to landscape orientation then it suddenly appears and this remains the case if you switch back to portrait.

Strangely if you remove the h1 element then the web font renders fine:

http://stephen-young.me.uk/nexus_test2.html
nexus_landscape.jpg
60.3 KB View Download
nexus_no_h1.jpg
47.2 KB View Download
nexus_portrait.jpg
56.9 KB View Download
Regarding my previous comment I forgot to mention my versions:

Chrome: 18.0.1025469
Android: 4.1

Comment 17 by Deleted ...@, Jan 30 2013

This appears to be marked as resolved but I still have this exact issue. Font-face fonts work in landscape orientation but not portrait.

Chrome 18.0.1025469
Android 4.1.1

Comment 18 by s...@typekit.com, Jan 31 2013

My test case (linked from the original message) still doesn't work in the latest version of Android Chrome, but I think that's because the version of Chromium that fixes this has not yet been released to Android Chrome. They marked it as fixed because it's fixed in the version under active development, and will be released some time in the future.
This should be fixed in Chrome 25, which you can download (in beta) from https://play.google.com/store/apps/details?id=com.chrome.beta

Comment 20 by s...@typekit.com, Jan 31 2013

Confirmed that my original test page behaves correctly in both portrait and landscape in Chrome Beta for Android on a Nexus 4. Excited for this fix to come to mainline Chrome! This has been a really nasty bug for developers using web fonts.
Project Member

Comment 21 by bugdroid1@chromium.org, Mar 10 2013

Labels: -Area-WebKit -WebKit-Fonts -Feature-Mobile-Fontboosting -Mstone-25 Cr-Content Cr-Content-Fonts Cr-Content-TextAutosize M-25
Project Member

Comment 22 by bugdroid1@chromium.org, Apr 6 2013

Labels: -Cr-Content Cr-Blink
Project Member

Comment 23 by bugdroid1@chromium.org, Apr 6 2013

Labels: -Cr-Content-Fonts Cr-Blink-Fonts
Project Member

Comment 24 by bugdroid1@chromium.org, Apr 6 2013

Labels: -Cr-Content-TextAutosize Cr-Blink-TextAutosize

Comment 25 by Deleted ...@, May 23 2013

It will break auto zoom, but if you're okay with not having auto zoom in favor of making webfonts work, you can add this to your CSS:

* { max-height: 999999px }

Not ideal, but a good workaround until they get it fixed. 

Comment 26 by Deleted ...@, Apr 4 2014

Fixed? This issue seems to persist. Some webpages are completley mixed up, some paragraphs are either  way too large or small. Havent had such problems with any mobile webbrowser, so i think thats pretty embarassing for Google....

Comment 27 by Deleted ...@, Jul 16 2014

How come android has a problem with it and ios doen't? It's a frickin' google solution!

Comment 28 by here...@gmail.com, Aug 9 2014

I'm seeing this in Chrome on a Nexus 7 running Android 4.4.4.

Comment 29 by pdr@chromium.org, Aug 10 2014

Cc: pdr@chromium.org
@heretic, I am not able to reproduce this on Chrome 36.0.1985.128 on a Nexus 7 with Android 4.4, nor on Chrome 36.0.1985.131 on a Nexus 5 with Android 4.4. I also tried a build at tip of tree and was not able to reproduce this

Are you using the testcase included in the original report? Can you please provide the information from about://version on your Android device?
This is so annoying. It cost me half a day just to get a decent article on stack overflow that actually mentioned the right cause of this problem!
Why does chrome on android interfere with the font-settings, even if they are marked !important ?? Font size and line height and div-width gets "auto-changed" with no way of preventing it. This can't be!

Comment 31 by pdr@chromium.org, Oct 9 2014

@cthomann, this bug was fixed a long time ago. If you are still hitting issues, please file a new bug with a testcase or example page.

All browsers boost the font sizes of non-mobile-optimized pages on mobile. Without it, many pages would be unreadable. If you use a meta viewport, we consider you to be a mobile-designed page and autosizing will be disabled in most cases.

Comment 32 Deleted

I have an error on to the Adobe Flash when opening on the Chrome Browser online, video not running into the browser. I also try on the https://www.adobesupportphonenumber.com/ regarding the Adobe Flash but no positive response.

Comment 34 Deleted

Sign in to add a comment