hughevans/_no_fout.css.scss

## _no_fout.css.scss
// 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;
      }
    }
  }
}

## index.html
<!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>
	// 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>