General: Bundle a local version of Merriweather instead of loading from Google Fonts.

[mattmiklic]

On January 22, the version of Merriweather hosted on Google Fonts was updated to version 1.582. This version includes significant visual departures from the original version of Merriweather. This PR bundles the original version of Merriweather into Calypso, and replaces the existing references to Google Fonts' version of Merriweather.

I've tested in the following browsers: IE 11, Edge, Chrome 48 (Mac/Win), Firefox 43 (Mac/Win), Safari 9, Safari for iOS 9, Chrome 47 Android, Firefox 43 Android.

The "before" in the following screenshots show what Calypso looks like today. The "after" is the result of this PR, and is identical to what Calypso looked like prior to January 22.

Chrome 48 Win:

Firefox 43 Win:

Edge:

IE 11 (could not log into calypso.localhost in IE11, screenshot is from /devdocs/):

Chrome 48 OS X:

Firefox 43 OS X:

Safari 9 OS X:

Safari 9 iOS:

Chrome 47 Android:

Firefox 43 Android:

TODO:

• Test more.
• Verify whether we need all of the font formats that I've included.
• Check that I've put the font in the right place and code style looks right.
• Probably something else -- what potential problems might this create?
• Any potential impact on speed?

cc @apeatling

[mattmiklic]

Everything seems to be working as expected here, but would love to get more eyes on it, particularly on non-Mac, non-iOS devices if possible.

[apeatling]

I think we will want to serve this from a CDN on WordPress.com. I wonder if it's better to add it to our CDN and then include that in Calypso instead?

[mattmiklic]

I think we will want to serve this from a CDN on WordPress.com. I wonder if it's better to add it to our CDN and then include that in Calypso instead?

I figured that would be the case for WordPress.com. I thought bundling it locally would be nice for local development (one fewer external dependency), but don't have a strong opinion on which way we include it.

[shaunandrews]

Gave it a spin on Mac (safari, chrome, firefox), Windows 10 (Edge, Firefox, Chrome) and Android (chrome) and all works as expected.

Also, my eyes thank you.

[apeatling]

@mattmiklic I think it's good to bundle it locally too. What if we first try the WordPress.com CDN, and then fall back to the local version that you have here?

[mattmiklic]

What if we first try the WordPress.com CDN, and then fall back to the local version that you have here?

This makes sense to me.

Gave it a spin

Thank you @shaunandrews!

[apeatling]

@mtias Do you have some thoughts here? We need to load the old version of Merriweather, so we're bundling it locally to load. I'd imagine that for WordPress.com we will want to use the CDN. What's the best way to load it from the CDN for WordPress.com only? Or should we just load it from the CDN for everyone, and fall back to a local copy with a bad connection?

[artpi]

@apeatling, @mattmiklic,

What if we first try the WordPress.com CDN, and then fall back to the local version that you have here?

I was playing around with these ideas in #2719

@mattmiklic, maybe we can combine our efforts? I want all resources to be loaded locally if cdn is not accessible.

We can detect CSS missing by (this is pages/index.jade) :

        script.
            (
                window.cssFallback = function() {
                    console.log('not loaded', this);
                }
            )
        link(rel='stylesheet', href='//s1.wp.com/potato.css', onerror='window.cssFallback()')

Apparently support for onerror is not that bad and it would work in desktop app, because chromium supports it.

[mattmiklic]

@mattmiklic, maybe we can combine our efforts? I want all resources to be loaded locally if cdn is not accessible.

Makes sense to me. We'll want to use the font files I've added here, since they'll give us browser support that should be equal to what we got with Google Fonts. I'll defer on the code that actually calls them, since I think you guys know the best way to handle that.

[mattmiklic]

@artpi @apeatling Is there anything else you guys need from me to make this change?

[mtias]

sorry @artpi, I will look at this tomorrow.

[apeatling]

@mtias Would really like to get this one squared away so we don't have the new version of Merriweather sticking around. Could you take a look here?

[mtias]

@mattmiklic can we have this in WP.com cdn as well?

[mtias]

@apeatling @mattmiklic @artpi let's get this loaded from WP.com CDN to start as the fastest immediate fix for the visual design we want.

We should continue looking at loading local assets for development separately like Artur proposes but no need to conflate the two issues right now.

[mattmiklic]

let's get this loaded from WP.com CDN to start as the fastest immediate fix for the visual design we want.

This sounds good to me -- I'm not sure how to go about doing this, though.

[mtias]

@apeatling @mattmiklic mind giving this branch a go?

[mattmiklic]

@mtias Tested the following:

• Chrome OS X, Win, Android: loaded WOFF2
• Firefox OS X, Win, Android: loaded WOFF2
• Safari OS X, iOS: loaded WOFF
• Microsoft Edge, IE 11: loaded WOFF

Everything looked good.

[mtias]

Excellent!

[apeatling]

👍 Looks good