Standalone font loader doesn't load custom marketsans if @font-face definitions are not available

dsathyakumar commented 5 years ago

Issue Standalone font loader doesn't load custom marketsans font files, if @font-face definitions are not available in the parent page.

Context

eBay Inc., uses the widget platform that attempts to load market-sans font via the stand alone loader present in this repo.
Only if the parent page makes uses of ebay-font module, via their page rendered marko templates, in the <head/> section, the marketsans definitions from @ebay/Skin gets stamped.
If the page doesn't use this module, then, the stand-alone loader attempts to load the marketsans font files, but as the associated definitions via @font-face rules are not available, the custom font doesn't get downloaded, yet it adds an entry into the localstorage thereby also preventing future downloads.

Possible Solve: Create a style element via JS and append it to the <head/> & Inline the market-sans definitions in it & before triggering the downloads. As this anyway happens via font-display: optional, after window load, this would most likely prevent FOUT and FOIT.

If the suggested solve looks okay, lmk & i'll open a PR. Thx! @RajaRamu @senthilp

senthilp commented 5 years ago

@dsathyakumar Why does the widget platform need marketsans? I was thinking that the widget platform should just leverage the font of the parent page. Meaning, you should apply the font as marketsans with a backup. If the main page has marketsans you will get it, else the default will work.

Downloading a new font just for the widget platform may cause an inconsistent experience.

dsathyakumar commented 5 years ago

Thx for the reply @senthilp .

The widget platform is horizontally available across all the high traffic eBay pages via the GH. From what I understand, as widget platform is present across pages via GH, the domain pages would not require ebay-font integration & this script would help load it.

Perhaps @RajaRamu would be able to elaborate more on why this is loaded with the widget platform.

Newer modules on the dweb GH like Shipping awareness, RVI etc., (that load across pages) require the marketsans font & this isn't available on few pages (where they intend to have the modules shown).

dsathyakumar commented 4 years ago

Latest on this is, The Gadgets need this font to look uniform on Marketsans across pages.

The issue is due to,

And occurs here,

eBay / ebay-font

Standalone font loader doesn't load custom marketsans if @font-face definitions are not available #45