Disabling Defer seems to break Async Font Loader [#2939889]

After setting
Deferred JavaScript Execution: Add The defer Tag To All Script Tags

to Disabled, for the purposes of Masonry JS & Masonry Views module, (breaks with this setting enabled) the Async Font Loader seems to have a bug.

After changing, on page first load, the fallback fonts are loaded and shown, and then on refresh the correct fonts are shown.

No Console errors.
No CSS errors.

We are using settings almost exactly from : https://groups.drupal.org/node/517292, except for the Defer setting above.

Can provide a HAR by email if required or further information.

Thanks for you help in advance!

Comment	File	Size	Author
#6	advagg-2939889-4-run-font-js-first.patch	1.8 KB	mikeytown2
#6

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

26 January 2018 at 20:23

bamboodigital created an issue. See original summary.

Comment #2

mikeytown2 CreditAttribution: mikeytown2 commented 26 January 2018 at 21:25

Try setting the AdvAgg cache to normal. Odds are it's this issue
#2934796: Aggressive render cache & relocate submodule; render cache/Aggressive render cache & loadcss inline javascript

Comment #3

mikeytown2 CreditAttribution: mikeytown2 commented 28 January 2018 at 00:10

Category:

Bug report

» Support request

on page first load, the fallback fonts are loaded and shown, and then on refresh the correct fonts are shown.

If the fix in the above issue doesn't do it I'd like to see a HAR file so this can be further debugged. I can't reproduce this reported bug locally; I will say that if the "Prevent the Flash of Unstyled Text." checkbox is checked this is how it works; fallback used on first load, new font used on next pageload.

Comment #4

28 January 2018 at 00:47

mikeytown2 committed a4f10c1 on 7.x-2.x

Issue #2939889 by mikeytown2: Disabling Defer seems to break Async Font...

Comment #5

28 January 2018 at 01:19

mikeytown2 committed 8c3e355 on 7.x-2.x

Issue #2939889 by mikeytown2: Disabling Defer seems to break Async Font...

Comment #6

mikeytown2 CreditAttribution: mikeytown2 commented 28 January 2018 at 01:19

Status:

Active

» Fixed

File	Size
advagg-2939889-4-run-font-js-first.patch	1.8 KB

This puts the loader code above any css; looks like browsers that are not single threaded (firefox & chrome) might parse the css before the js adds the class to the top html tag. Not a lot that can be done here, seems like the use of font-display is the way forward eventually.

This has been committed; reopen if you have more ideas on how to solve this.

Comment #7

mikeytown2 CreditAttribution: mikeytown2 commented 6 February 2018 at 03:52

Status:

Fixed

» Active

Circling back to this; do all your fonts have a defined fallback? Go to admin/config/development/performance/advagg/font and under NOT Async Loaded in CSS are there any fonts listed?