get Open Sans font from Google CDN instead of local hosting (and include extended character sets)

[sathomas]

get Open Sans font from Google CDN instead of local hosting (and include extended character sets)

[sathomas]

Retargeting of #3369

[sathomas]

assigned to @nicolaasmatthijs for review

[nicolaasmatthijs]

@sathomas : Looks like there is a merge conflict here.

[sathomas]

merge conflicts fixed, back to @nicolaasmatthijs for review

[nicolaasmatthijs]

Moving this to bootstrap as it fixes a bug in there

[sathomas]

Note to folks regarding this PR. I just checked and Vietnamese is listed as a requested language for OAE at crowdin.net. If/when we actually have a Vietnamese translation, we'll need to revisit this issue to add support for Vietnamese characters in the font. (Presently they're not included to minimize download time.)

[nicolaasmatthijs]

It looks like the font is no longer included correctly when using this with a production build.

Now:

Before:

Assigning back to @sathomas for investigation. You might want to liaise with @stuartf and @mrvisser, 2 world-renowed experts in production builds.

[sathomas]

@stuartf, @mrvisser I will definitely need some oversight (if not outright assistance). Digging through the grunt files, we're using r.js to optimize CSS files by inlining any @import statements. In this case, however, referencing the Google Fonts CDN requires an @import statement that should not be inlined, namely:

@import url('//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700&subset=latin,cyrillic-ext,latin-ext,greek-ext');

There is an option to r.js to avoid inlining specific CSS files.

If optimizeCss is in use, a list of files to ignore for the @import inlining. The value of this option should be a string of comma separated CSS file names to ignore (like 'a.css,b.css'. The file names should match whatever strings are used in the @import calls.

And now, perhaps, you can already see the problem; r.js is expecting a "comma separated list" but the URL itself includes commas. I'll try some experiments to figure out if there's any value that we can set to coerce r.js to ignore the Google CSS, but

1. The r.js source code doesn't inspire a lot of confidence with comments such as "This is not done in the regexp, since my regexp fu is not that strong", and
2. If it works at all it's probably going to result in some ugly bastardization of the filename such as

cssImportIgnore: 'css'

or

cssImportIgnore: 'css?family=Open+Sans:300italic'

Any suggestions would be most welcome.

[mrvisser]

Would be good to make a TODO here referencing your open PR r.js to change to a more robust regexp match.

[sathomas]

Over to @nicolaasmatthijs for official review

[nicolaasmatthijs]

I'm going to move this to just below ## Installing OAE, as it seems better placed there

[nicolaasmatthijs]

Still seeing the visual regression:

[nicolaasmatthijs]

Assigning to @sathomas for investigation

[sathomas]

Adjusted build and it looks to be working locally for me; time for another @nicolaasmatthijs review

[nicolaasmatthijs]

Looks good. Merged.

Verified that this fixes #3617 as well.