Skip to content
This repository has been archived by the owner on Sep 16, 2019. It is now read-only.

Font "reloading" after page load #604

Closed
dinoquarin opened this issue Dec 10, 2015 · 9 comments
Closed

Font "reloading" after page load #604

dinoquarin opened this issue Dec 10, 2015 · 9 comments
Labels
bug

Comments

@dinoquarin
Copy link

If anyone else is getting this (see gif), I have a temporary fix. It acts a bit like FOUC.

dec 10 2015 17 12 - text issue

If you comment out line 26 and 30 from the library/enqueue-scripts.php it loads "properly". Both need to be commented out at least in this quick "fix"

screen shot 2015-12-10 at 5 20 15 pm

This is from a clean download, cache cleared, no scripts blocked. Typekit and JQuery looks like they are loading properly too.

Hope this helps.
@colin-marshall
Copy link
Collaborator

I noticed this when I built the gulpfile but I didn't have time pinpoint the problem. My best guess is that some JavaScript that loads in the footer is causing this. It also might be Browsersync related. I would love to get this fixed.

@colin-marshall
Copy link
Collaborator

Ok so this has nothing to do with Gulp or Browsersync as the problem can be seen on the FoundationPress demo site on page load.

@colin-marshall
Copy link
Collaborator

Found it! It's an issue with the Typekit embed script that loads at the bottom of the page. To confirm this, while the watch tasks were running with gulp I renamed assets/javascript/custom/typekit.js to typekit with no js extension so it would not be included when javascript builds. When I did that the problem was gone.

http://help.typekit.com/customer/portal/articles/6852-Controlling-the-Flash-of-Unstyled-Text-or-FOUT-using-Font-Events

@colin-marshall
Copy link
Collaborator

typekit.js is actually being loaded in the header and the footer. It's enqueued in the header and concatenated into foundation.js in the footer.

When I made gulpfile.js I used this from the Gruntfile.js:

// Include your own custom scripts (located in the custom folder)
'assets/javascript/custom/*.js'

That is concatenating everything with the js extension in the /custom folder, including typekit.js, into foundation.js.

@olefredrik do we want typekit.js to be ignored for the concatenation of foundation.js or do we want to not be enqueueing it in enqueue-scripts.php?

@olefredrik
Copy link
Owner

@colin-marshall : Typekit should be placed in the <head> section of the page. So it would be best to ignore it for the concatenation of foundation.js. It would perhaps be best to move the typekit script out of the custom folder. I have worked day and night on a project at work, so unfortunately I have not had time to follow up all FP issues in recent days. Appreciate your efforts on issues and pull requests!

@colin-marshall
Copy link
Collaborator

No problem! Where would you suggest we put typekit.js? In vendor instead of custom?

@colin-marshall colin-marshall mentioned this issue Dec 12, 2015
Closed
@olefredrik
Copy link
Owner

#610

@olefredrik olefredrik added the bug label Dec 12, 2015
@dinoquarin
Copy link
Author

Thank you for fixing this @colin-marshall and @olefredrik

@olefredrik
Copy link
Owner

If you're using Typekit with async javascript and want to remove the text-flash (FOUT) on page load, you can add this to your stylesheet.

.wf-loading {
   visibility: hidden;
 }

 .wf-active, .wf-inactive {
   visibility: visible;
 }

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@olefredrik @colin-marshall @dinoquarin