1150118 - Lazyload tabzilla.css and MDN fonts

Status: RESOLVED FIXED

Description

[Stephanie Hobson [:shobson]]

Lazy load tabzilla.css and the MDN fonts.

Requirements for font lazy loading:
- prefer if fallback displays on first visit and web font displays on second (no FOUT, all UT and then no UT.)
- create very close fallback fonts so that difference is not immediately evident.

Comment 1

[David Walsh :davidwalsh]

I remember lazyloading the CSS a while back but it did a wicked, wicked repaint or something else weird.  I don't know that this is an option without changes to Tabzilla.

Comment 2

[Stephanie Hobson [:shobson]]

I think we'll have to copy a few lines of their CSS into our CSS, but I'm okay with that.

Comment 3

[MDN Team (:mdn-dev)]

Commits pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/b13892846fe678243299b5a2f84144e9e7893ba3
Bug 1150118 - Lazy load fonts

Some clean up in anticipation of changes to font stuff:

- Use variable to set font family
- Use mixin to set font size
- Added Arial to fallback list (more size appropriate than Helvetia which is Mac sans-serif default)
- Line-height and letter-spacing should be relative to font-size not pixels

https://github.com/mozilla/kuma/commit/0b0eeedd723e05d72afb5d108a4dce69c679ea67
Merge pull request #3168 from stephaniehobson/BUG-1150118-lazyload-fonts

Bug 1150118 - Lazy load fonts

Comment 4

[MDN Team (:mdn-dev)]

Commits pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/94b3ddb43bf54a3048ff113b4dedb53a48451a6e
Bug 1150118: Lazyload Tabzilla

Added necessary CSS to MDN sheets to prevent repaints as tabzilla js and css load.

https://github.com/mozilla/kuma/commit/e999b23294f4d8392461ac9ebf2f6a90da2614d9
bug 1150118 - Ensure tabzilla link does not display until after load

Comment 5

[Stephanie Hobson [:shobson]]

:gerv I could use a 3rd opinion on the inclusion of the Font Face Observer library in the MDN. The original repo is here: https://github.com/bramstein/fontfaceobserver I copied only fontfaceobserver-standalone.js from the repo but the file did not include the license so I added the license into the file. I need to double check that 1) the license is compatible with MDN and 2) I am adhering to it. 

PR with details and links here:
https://github.com/mozilla/kuma/pull/3192#discussion_r28984443

Thanks!

Comment 6

[Gervase Markham [:gerv] (not reading bugmail)]

shobson: the file you copied is minified. It seems to me that we should take the unminified file into the tree as well, even if we don't link to it anywhere. 

Adding the license to the top of the file(s) makes good sense, unless you create a subdir and put the files in it along with a LICENSE file. However, you seem to have added the copyright line, not the license text itself. You either need to add the contents of this:
https://github.com/bramstein/fontfaceobserver/blob/master/LICENSE
in a comment at the top (which doesn't fit well with minification), or do the subdirectory thing and add something like:

BSD License - see LICENSE file

to the minified file.

Hope that helps,

Gerv

Comment 7

[MDN Team (:mdn-dev)]

Commits pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/d32979b8b74e452cc03ec448ba694707c177285b
Bug 1150118 - Lazy load fonts

Added FontFaceObserver library.

Added python to check for cookie to speed up loading fonts.

Hand crafted fallback font declarations for several font declarations.

Removed MozTT declarations from opensans.styl file.

ToDo:
- get Y/N go ahead
- waffle
- find solution for javascript disabled
- check licence on FFO

https://github.com/mozilla/kuma/commit/2de7605125b7f6ac160e8c03e788f5c393cae41d
Merge pull request #3192 from stephaniehobson/BUG-1150118-lazyload-fonts

Bug 1150118 - lazyload fonts

Comment 8

[MDN Team (:mdn-dev)]

Commits pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/c77f6da3037287c3e41ae91ac0ea95329ff323b6
Bug 1150118: Dropping time out to 2 seconds

Let's experiment with this for a week. It's not quite the "Can we just not swap out the fonts on first load" some people are asking for but it decreases how far someone can get before the swap happens, if it happens at all.

https://github.com/mozilla/kuma/commit/3c293f921bdbad4d70833bf8c67c5c791625cf44
Merge pull request #3224 from stephaniehobson/BUG-1150118-lazyload-fonts

Bug 1150118: Dropping time out to 2 seconds

Comment 9

[MDN Team (:mdn-dev)]

Commits pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/397b78815150ab642f60d1262fb649a7805991d0
bug 1150118 - JavaScript code quality updates

https://github.com/mozilla/kuma/commit/8f3241ddf5563d235f319fda51701825ab977f1e
Merge pull request #3225 from darkwing/1150118-fonts

bug 1150118 - JavaScript code quality updates

Comment 10

[Stephanie Hobson [:shobson]]

We've got a technique for this decided and working for open sans and open sans light :)

Still to do:
- Open Sans Extra Bold
- remove code relating to waffling the behaviour.

Comment 11

[MDN Team (:mdn-dev)]

Commits pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/9e44bc7562b99d5deafd47cd6563e962d99b27de
Bug 1150118 - fixing munged variable name

https://github.com/mozilla/kuma/commit/6d90a1204a3d5d7645f355c71f8e2c6fd52772cd
Merge pull request #3275 from stephaniehobson/bug-1150118-lazyload-fonts

Bug 1150118 - fixing munged variable name

Comment 12

[MDN Team (:mdn-dev)]

Commits pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/408dbca3782c1b9e479a3bef755aa18063d33527
bug 1150118 - A bit of JS cleanup

https://github.com/mozilla/kuma/commit/ff9310d2e1b9965715206dc4befc42d42a98d1ac
Merge pull request #3283 from darkwing/1150118-cleanup

bug 1150118 - A bit of JS cleanup

Comment 13

[Stephanie Hobson [:shobson]]

The new redesign removes Open Sans Extra Bold from the site and the new zilla font is lazy loaded.

Comment 14

[[github robot]]

Commit pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/4aed0cd374de8da4d7617ed6d2dfe7c878201cfa
Bug 1150118: Fix lazy loading fonts (#4482)

- repair zilla fallback font declaration
- switch to mixin for all font-family declarations