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.
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.
I think we'll have to copy a few lines of their CSS into our CSS, but I'm okay with that.
Severity: normal → enhancement
OS: Mac OS X → All
Hardware: x86 → All
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
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
: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!
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
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
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.
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
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
The new redesign removes Open Sans Extra Bold from the site and the new zilla font is lazy loaded.
Status: NEW → RESOLVED
Last Resolved: 2 years ago
Resolution: --- → FIXED
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
You need to log in before you can comment on or make changes to this bug.