723131 - m.wired.com showing incorrect fonts.

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[Ian Barlow (:ibarlow)]

Attachment: screenshots

The mobile Wired site uses web fonts, but they don't display on mobile Firefox. 

mbrubeck suggested that it could be that Wired is doing some bad browser detection and not sending us the fonts. Can someone try contacting them about this? A screenshot is attached.

Comment 1

[Aaron Train [:aaronmt]]

I think we fail somewhere in the Typekit platform detection code; m.wired.com uses http://use.typekit.com/ztc8lol.js

Comment 2

[Lawrence Mandel [:lmandel] (use needinfo)]

Attachment: Updated screenshot of wired.com in Fennec and Android stock

The fonts are now displayed better but they're still not quite the same. Reopening as this bug was about showing the correct fonts.

Comment 3

[Ian Barlow (:ibarlow)]

Based on https://bugzilla.mozilla.org/show_bug.cgi?id=775117#c6, it looks like all that needs to happen is that Wired needs to update their typekit software and fonts will load correctly. More details here http://blog.typekit.com/2012/07/31/support-for-more-browsers-on-ios-and-android/

Can we contact them?

Comment 4

[Mike Taylor [:miketaylr]]

It looks like they've updated since this bug was reported... but it appears the version they updated to is 2 months behind the version that added support.

Previous script: http://use.typekit.com/ztc8lol.js, "created":"2011-12-16T08:02:09Z"
Current script: http://fonts.condenast.com/sli3ton.js, "created":"2012-05-09T00:15:17Z"

Comment 5

[Karl Dubost💡 :karlcow]

There is another bug to solve before this one. See Bug 943468

Comment 6

[Karl Dubost💡 :karlcow]

The site also doesn't serve anymore content on http://m.wired.com/
It redirects every devices, iOS included to http://www.wired.com/

Comment 7

[Karl Dubost💡 :karlcow]

So let's make a summary of what is happening now:

Every devices are redirected to http://www.wired.com/
Their "about mobile" page http://www.wired.com/about/mobile still mentions http://m.wired.com/ 


# Firefox OS  Firefox  

1. Accessing http://www.wired.com/
Two gray boxes and text of a JavaScript which then disappears.
Some text for menu and footer. Too small to read. 
A reload and the text is readable, but still nothing more than some random menu.
2. The "full site" link leaves in the same state.
3. The right top menu (3 bars) doesn't work.
4. The "Load More +" link doesn't work.
5. Clicking on the top logo, brought the full desktop Web site.
6. Reentering manually m.wired.com brought back to the full Desktop Web site being displayed on www.wired.com
7. Erasing cookies.
8. entering www.wired.com
9. Back to 1.

# Firefox for Android

Same issues than Firefox OS. except for the script at the start and the small fonts. Nothing really usable.


# Opera Mobile Presto Android

It brings directly a full desktop Web site.
If I enter m.wired.com same thing full desktop Web site but with a different initial zoom.

# Opera Mini Android

it brings directly a full desktop Web site
with even a bigger initial zoom

# UC Web Android (Webkit engine)

It is displayed perfectly from the start. Everything is working


They have a special form for Web sites issues
http://www.wired.com/about/sitefix/

I need to understand a bit better before contacting, switching to notcontactready. I suspect Webkitcss

Comment 8

[Karl Dubost💡 :karlcow]

At the start of the code, they have a script 
* for time, which is I guess the code we see being displayed on Firefox OS for a couple of seconds.
* Then the mobify script for firefox Mobile, but somewhow the rest falls apart after.


<!-- MOBIFY - DO NOT ALTER - PASTE IMMEDIATELY AFTER OPENING HEAD TAG -->
<script type="text/javascript">

var NREUMQ = NREUMQ || [];
NREUMQ.push(["mark", "firstbyte", new Date().getTime()]);

</script>
<script type="text/javascript">
/*<![CDATA[*/
(function(a) {
	function b(a, b) {
		if (+a) return~ a || (d.cookie = h + "=; path=/");
		j = d.createElement(e), k = d.getElementsByTagName(e)[0], j.src = a, b && (j.onload = j.onerror = b), k.parentNode.insertBefore(j, k)
	}

	function c() {
		n.api || b(l.shift() || -1, c)
	}
	if (this.Mobify) return;
	var d = document,
		e = "script",
		f = "mobify",
		g = "." + f + ".com/",
		h = f + "-path",
		i = g + "un" + f + ".js",
		j, k, l = [!1, 1],
		m, n = this.Mobify = {
			points: [+(new Date)],
			tagVersion: [6, 1],
			ajs: "//a.mobify.com/wired/a.js"
		}, o = /((; )|#|&|^)mobify-path=([^&;]*)/g.exec(location.hash + "; " + d.cookie);
	o ? (m = o[3]) && !+(m = o[2] && sessionStorage[h] || m) && (l = [!0, "//preview" + g + escape(m)]) : (l = a() || l, l[0] && l.push("//cdn" + i, "//files01" + i)), l.shift() ? (d.write('<plaintext style="display:none;">'), setTimeout(c)) : b(l[0])
})(function() {
	if (/ip(hone|od)|android.*(mobile)|(mobile).*firefox|blackberry.*applewebkit|bb1\d.+mobile/i.test(navigator.userAgent)) {
		return [1, "//cdn.mobify.com/sites/wired/production/mobify.js"]
	}
	return [0, Mobify.ajs]
})
/*]]>*/
</script>
<!-- END MOBIFY -->

Comment 9

[Hallvord R. M. Steen [:hallvors]]

Karl, see bug 923360 - fixes for the general brokenness are pending.

Comment 10

[Karl Dubost💡 :karlcow]

So it seems there is no more issues with fonts.
There is still brokeness here and there on buttons, some links, overlapping layers.
But the font issue is gone?

Someone to confirm and CLOSE?