Fonts not rendered correctly in device emulation mode |
|||
Issue descriptionUserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.116 Safari/537.36 Example URL: myaccount.googe.com Steps to reproduce the problem: 1. open a new tab. 2. open the developer tools, and set to device mode (Nexus 5) 3. Go to "myaccount.google.com". You see the font used for *rendering* of "welcome <your name>" is Roboto (This can be checked at the *end* of the computed properties. 4. Refresh the page. 5. See the rendered font is now something else What is the expected behavior? Rendered font should stay Roboto What went wrong? Rendered font changed Does it occur on multiple sites: Yes Is it a problem with a plugin? N/A Did this work before? Yes Does this work in other browsers? Yes Chrome version: 53.0.2785.116 Channel: stable OS Version: Flash Version: Shockwave Flash 23.0 r0 This seems to be consistent in all of myaccount pages (though not for all elements). It is consistent in latest version of Chrome.
,
Sep 28 2016
,
Oct 3 2016
After steo 4, the Google fonts CSS for the myaccount.google.com page has the following @font-face rule: @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: local('Roboto Regular'), local('Roboto-Regular'), local('sans-serif'), url(//fonts.gstatic.com/s/roboto/v15/oMMgfZMQthOryQo9n22dcuvvDin1pK8aKteLpeZ5c0A.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; } This is for the standard weight of 400. In the src line you see that a local sans-serif font is preferred over the Roboto network resource, so this font is chosen and used for rendering, in this case most likely DejaVu Sans. For the ligher weight of 300, the @font-face rules have the following src list: src: local('Roboto Light'), local('Roboto-Light'), local('sans-serif-light'), url(//fonts.gstatic.com/s/roboto/v15/0eC6fl06luXEYWpBSJvXCIX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2'); Since a local "sans-serif-light" is usually not available on Desktop, the network Roboto resource is chosen. I don't see any issues with Chrome's font selection logic here, it renders according to the requested CSS. The difference between step 2 "rendered in a smaller screen" and after step 4) is due to a different requested CSS from Google fonts. On Desktop, Google fonts does not insert the local("sans-serif") and local("sans-serif-light") fallback options. This is due to the fact that you can't access local fonts by "Roboto" family name on Android. CC'ing google fonts people. |
|||
►
Sign in to add a comment |
|||
Comment 1 by sheriffbot@chromium.org
, Sep 28 2016