Conditionally load fonts on [Bedrock]

VERIFIED FIXED

Status

www.mozilla.org
Bedrock
VERIFIED FIXED
5 years ago
5 years ago

People

(Reporter: cmore, Assigned: craigcook)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [kb=1235338] )

(Reporter)

Description

5 years ago
Currently, the sandstone theme on Bedrock loads 6 .woff fonts:

OpenSans-Regular-webfont.woff?2013 mozorg.cdn.mozilla.net/media/fonts/ 	83.4 kB
OpenSans-Bold-webfont.woff?2013 mozorg.cdn.mozilla.net/media/fonts/ 	62.5 kB
DroidNaskh-Regular.woff mozorg.cdn.mozilla.net/media/fonts/ 	101.4 kB
DroidNaskh-Bold.woff mozorg.cdn.mozilla.net/media/fonts/ 	105.9 kB
OpenSans-Semibold-webfont.woff?2013 mozorg.cdn.mozilla.net/media/fonts/ 	63.3 kB
OpenSans-Light-webfont.woff?2013 mozorg.cdn.mozilla.net/media/fonts/ 	61.8 kB

Two of those fonts are the DroidNaskh fonts that total in 207.3kb. Those fonts are loaded on all page requests regardless of what languages the visitor is using.

If we were to conditionally load those fonts for only the locales that need them, we instantly shave off 200k from the page size. The /firefox/new/ page is currently 868k and removing these fonts from non-Arabic locales, will reduce the page size by by 23%.
(Assignee)

Updated

5 years ago
Whiteboard: [kb=1235338]
(Assignee)

Comment 1

5 years ago
We can pull those @font-face rules out of the external CSS and put them into an embedded style in the base template with some conditional logic:

{% if LANG in ['ar','fa'] %}
<style>
@font-face { etc }
</style>
{% endif %}

This does, however, mean the rare page with mixed content -- a page in another language that contains some Arabic or Persian text -- the Arabic/Persian bits wouldn't render in the Naskh font, it would fall back to the system default.

If there are strong objections to embedding the style in the template we could
Assignee: nobody → craigcook.bugz
(Assignee)

Comment 2

5 years ago
doh, clicked too soon. As I was saying...

If there are strong objections to embedding the style in the template we could have a separate external style sheet, but I'm not sure if that's better apart from code purity.
(Assignee)

Comment 3

5 years ago
Merged to master in https://github.com/mozilla/bedrock/commit/bfc6bad9be83ec09c2571cb6e8d6bbfd2232e047

The code references this bug so this will serve as documentation for future generations who may find this blob of CSS in the base HTML template and wonder why it's there. This is, admittedly, a bit of a hack, and we may find a better method to address the problem in the future. 

There are other languages that may want their own webfonts as well, so if it comes a point where we're adding numerous embedded conditional blocks we should explore other options instead of further polluting the templates.

Also, these embedded style blocks should only contain @font-face declarations. Don't use this method for any other language-specific styling. Keep CSS in external CSS files whenever possible. We have other hooks for styling things for particular languages (attribute selectors or a body class).
Status: NEW → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → FIXED
(Reporter)

Comment 4

5 years ago
Default and no droid fonts: https://www.allizom.org/en-US/firefox/new/

Droid and default fonts: https://www.allizom.org/ar/firefox/new/

Droid and default fonts: https://www.allizom.org/fa/firefox/new/

671k now: http://tools.pingdom.com/fpt/#!/cs7k6F/www.allizom.org/en-US/firefox/new/

That's a 197k savings. Nice!
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.