Skip to content

Instantly share code, notes, and snippets.

@hughevans
Last active August 29, 2015 13:55
Show Gist options
  • Save hughevans/8762568 to your computer and use it in GitHub Desktop.
Save hughevans/8762568 to your computer and use it in GitHub Desktop.
No FOUT
// No FOUT
html.js {
&.wf-loading {
.all, .your, .text, #selectors {
opacity: 0;
}
&.no-opacity {
.all, .your, .text, #selectors {
visibility: hidden;
}
}
}
&.wf-active, &.wf-failed {
.all, .your, .text, #selectors {
opacity: 1;
@include transition-property('opacity');
@include transition-duration('.17s');
@include transition-timing-function('linear');
}
&.no-opacity {
.all, .your, .text, #selectors {
visibility: visible !important;
}
}
}
}
<!DOCTYPE html>
<html class="no-js wf-loading" lang="en">
<head>
<!-- Opacity + Fontface tests -->
<script src="modernizr.js"></script>
<script>
Modernizr.load([
{
test: Modernizr.fontface,
yep : 'http://use.typekit.com/your-typekit-or-some-other-webfont-provider.js',
callback: function() {
var removeWfLoading = function() {
document.documentElement.className = document.documentElement.className.replace(/\bwf-loading\b/, 'wf-failed');
};
setTimeout(function() {
try { Typekit.load(); } catch(e) { removeWfLoading(); }
}, 10);
setTimeout(function() { removeWfLoading(); }, 1000);
}
}
]);
</script>
</head>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment