bfncs/index.html

## index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="de"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="de"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="de"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="de"> <!--<![endif]-->
<head>
    <meta charset="utf-8" />
    <link rel="dns-prefetch" href="//fast.fonts.com" />
    <title>Fonts.com asynchronous loading test</title>
    <meta name="description" content="Lorem ipsum ist ein Blindtext, der nichts bedeutet, aber gut aussieht." />
    <meta name="keywords" content="Blindtext, Lorem ipsum" />
    <meta name="robots" content="noindex, nofollow" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1" />
    <script>document.documentElement.className=document.documentElement.className.replace(/(^|\s)no-js(\s|$)/,'$1js$2');</script>
    <script type="text/javascript" src="http://fast.fonts.com/jsapi/635f446b-32a9-4af7-9627-901d20bf877e.js"></script>
    <link rel="stylesheet" type="text/css" href="css/screen.css" />
    <!-- No Javascript Fallback für den Font
    <noscript>
        <link rel="stylesheet" type="text/css" href="STATISCHER LINK ZUR CSS BEI FONTS.COMk" />
    </noscript>
    -->
</head>
<body>
    <div id="wrapper">
        <div class="main">
            <h1>Specimen</h1>
            <h2>Web typography is beautiful</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit tempus molestie. In pretium iaculis lorem id ultricies. Curabitur lobortis sapien ac magna ullamcorper faucibus. Aenean ac nibh diam. Donec id felis nunc, et bibendum erat. Nulla faucibus, lacus iaculis aliquet ultricies, diam nibh auctor risus, eget placerat est orci sed arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam diam tellus, scelerisque ut imperdiet eget, faucibus vel sapien. Sed vitae libero vel nisl tincidunt sodales. Donec scelerisque sodales velit, et interdum orci commodo ac. Maecenas malesuada condimentum turpis vel convallis. Integer sed mi id est scelerisque varius. Nulla facilisi.</p>
            <div class="imgContainer">
                <img class="" src="http://lorempixel.com/540/320/food/" alt="A placeholder image" />
            </div>
            <h2>With some headings</h2>
            <p>In mollis luctus libero nec euismod. Proin pellentesque rutrum tortor id venenatis. Integer eu lorem quis odio lacinia sollicitudin. Aenean leo urna, dictum at adipiscing et, posuere eget ipsum. Cras id dolor est. Curabitur at lorem eget neque gravida imperdiet nec quis lacus. Proin et facilisis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse ut mauris vel est cursus ornare non id nisl. Aenean porttitor fringilla lectus, vitae lobortis nisi interdum id. Nullam semper, ante id dictum consectetur, elit velit accumsan urna, eu faucibus lectus justo id nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec sed arcu purus.</p>
            <h2>And some paragraphs, too</h2>
            <p>Duis sed nisl ac mauris semper cursus. Vivamus sit amet libero in dolor euismod bibendum sed in massa. Nulla iaculis bibendum tempus. Pellentesque condimentum turpis nec tortor interdum ut blandit mauris vehicula. Fusce scelerisque odio vel dui luctus vel viverra odio semper. Nunc euismod luctus sapien, eu euismod lorem iaculis id. Pellentesque suscipit, lectus id volutpat posuere, nulla risus egestas erat, vitae cursus orci augue eu tellus. Donec quis elit in neque vulputate dignissim a eu justo. Ut tempus magna non tellus ultrices rhoncus. Duis sagittis blandit ultricies. Aliquam est sem, feugiat eu suscipit a, ultricies vel felis. Maecenas vel pharetra nisl.</p>
            <h3>Asynchronous Font loading is nice...</h3>
            <p>Vestibulum ut eros id diam viverra malesuada. Praesent vel odio odio. Nulla molestie, lectus ut vulputate posuere, sapien felis pretium magna, feugiat laoreet arcu mauris a nibh. Etiam sed tellus metus. Nam vehicula justo in odio venenatis lobortis et vel ipsum. Fusce facilisis sem non sem dictum eu congue diam euismod. Aenean at lectus nulla, nec dignissim elit. Donec viverra nunc sed tortor vehicula eu feugiat dui varius. Aenean orci tellus, adipiscing consequat bibendum placerat, molestie eu lectus. Nulla quis nunc orci. Nullam placerat nulla vitae nulla bibendum sit amet auctor risus pharetra. Sed semper lectus a purus convallis aliquam. Vestibulum massa mauris, facilisis a tincidunt eget, semper ut orci.</p>
            <h3>...but it has to work at first!</h3>
            <p>Pellentesque mi mi, pretium in scelerisque nec, facilisis id massa. Cras feugiat dui id dui volutpat malesuada posuere eros faucibus. Vestibulum mattis suscipit aliquam. Phasellus aliquet cursus ipsum sed cursus. Ut molestie laoreet elementum. Etiam varius orci sit amet nibh luctus tincidunt quis sed nisi. Maecenas leo nisi, ornare id fermentum sit amet, ornare at sapien. Duis pellentesque, felis vitae euismod sagittis, leo lorem vestibulum neque, in gravida urna orci vel dui. Nam ligula justo, consequat at pharetra eget, auctor in sem. In placerat quam nec felis sollicitudin vitae malesuada metus eleifend. Vivamus commodo ipsum mollis risus sodales malesuada. Duis et imperdiet elit. Proin sapien lorem, fermentum vel lacinia vitae, bibendum in erat. Etiam tristique, velit non mollis blandit, turpis eros rhoncus mi, iaculis tristique est velit at lectus. Morbi commodo felis sed ligula pellentesque sed dignissim nulla eleifend.</p>
        </div><!-- /.main -->
    </div><!-- /#wrapper -->
</body>
</html>

## screen.css
#wrapper {
  max-width: 540px;
  margin: 2em auto;
  color: #555;
}

h1,
h2,
h3 {
  visibility: hidden;
  font-family:'University W01 Bold';
}

.no-js h1,
.no-js h2,
.no-js h3,
.mti-active h1,
.mti-active h2,
.mti-active h3 {
  visibility: visible;
}
	<!DOCTYPE html>
	<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="de"> <![endif]-->
	<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="de"> <![endif]-->
	<!--[if IE 8]> <html class="no-js lt-ie9" lang="de"> <![endif]-->
	<!--[if gt IE 8]><!--> <html class="no-js" lang="de"> <!--<![endif]-->
	<head>
	<meta charset="utf-8" />
	<link rel="dns-prefetch" href="//fast.fonts.com" />
	<title>Fonts.com asynchronous loading test</title>
	<meta name="description" content="Lorem ipsum ist ein Blindtext, der nichts bedeutet, aber gut aussieht." />
	<meta name="keywords" content="Blindtext, Lorem ipsum" />
	<meta name="robots" content="noindex, nofollow" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1" />
	<script>document.documentElement.className=document.documentElement.className.replace(/(^\|\s)no-js(\s\|$)/,'$1js$2');</script>
	<script type="text/javascript" src="http://fast.fonts.com/jsapi/635f446b-32a9-4af7-9627-901d20bf877e.js"></script>
	<link rel="stylesheet" type="text/css" href="css/screen.css" />
	<!-- No Javascript Fallback für den Font
	<noscript>
	<link rel="stylesheet" type="text/css" href="STATISCHER LINK ZUR CSS BEI FONTS.COMk" />
	</noscript>
	-->
	</head>
	<body>
	<div id="wrapper">
	<div class="main">
	<h1>Specimen</h1>
	<h2>Web typography is beautiful</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit tempus molestie. In pretium iaculis lorem id ultricies. Curabitur lobortis sapien ac magna ullamcorper faucibus. Aenean ac nibh diam. Donec id felis nunc, et bibendum erat. Nulla faucibus, lacus iaculis aliquet ultricies, diam nibh auctor risus, eget placerat est orci sed arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam diam tellus, scelerisque ut imperdiet eget, faucibus vel sapien. Sed vitae libero vel nisl tincidunt sodales. Donec scelerisque sodales velit, et interdum orci commodo ac. Maecenas malesuada condimentum turpis vel convallis. Integer sed mi id est scelerisque varius. Nulla facilisi.</p>
	<div class="imgContainer">
	<img class="" src="http://lorempixel.com/540/320/food/" alt="A placeholder image" />
	</div>
	<h2>With some headings</h2>
	<p>In mollis luctus libero nec euismod. Proin pellentesque rutrum tortor id venenatis. Integer eu lorem quis odio lacinia sollicitudin. Aenean leo urna, dictum at adipiscing et, posuere eget ipsum. Cras id dolor est. Curabitur at lorem eget neque gravida imperdiet nec quis lacus. Proin et facilisis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse ut mauris vel est cursus ornare non id nisl. Aenean porttitor fringilla lectus, vitae lobortis nisi interdum id. Nullam semper, ante id dictum consectetur, elit velit accumsan urna, eu faucibus lectus justo id nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec sed arcu purus.</p>
	<h2>And some paragraphs, too</h2>
	<p>Duis sed nisl ac mauris semper cursus. Vivamus sit amet libero in dolor euismod bibendum sed in massa. Nulla iaculis bibendum tempus. Pellentesque condimentum turpis nec tortor interdum ut blandit mauris vehicula. Fusce scelerisque odio vel dui luctus vel viverra odio semper. Nunc euismod luctus sapien, eu euismod lorem iaculis id. Pellentesque suscipit, lectus id volutpat posuere, nulla risus egestas erat, vitae cursus orci augue eu tellus. Donec quis elit in neque vulputate dignissim a eu justo. Ut tempus magna non tellus ultrices rhoncus. Duis sagittis blandit ultricies. Aliquam est sem, feugiat eu suscipit a, ultricies vel felis. Maecenas vel pharetra nisl.</p>
	<h3>Asynchronous Font loading is nice...</h3>
	<p>Vestibulum ut eros id diam viverra malesuada. Praesent vel odio odio. Nulla molestie, lectus ut vulputate posuere, sapien felis pretium magna, feugiat laoreet arcu mauris a nibh. Etiam sed tellus metus. Nam vehicula justo in odio venenatis lobortis et vel ipsum. Fusce facilisis sem non sem dictum eu congue diam euismod. Aenean at lectus nulla, nec dignissim elit. Donec viverra nunc sed tortor vehicula eu feugiat dui varius. Aenean orci tellus, adipiscing consequat bibendum placerat, molestie eu lectus. Nulla quis nunc orci. Nullam placerat nulla vitae nulla bibendum sit amet auctor risus pharetra. Sed semper lectus a purus convallis aliquam. Vestibulum massa mauris, facilisis a tincidunt eget, semper ut orci.</p>
	<h3>...but it has to work at first!</h3>
	<p>Pellentesque mi mi, pretium in scelerisque nec, facilisis id massa. Cras feugiat dui id dui volutpat malesuada posuere eros faucibus. Vestibulum mattis suscipit aliquam. Phasellus aliquet cursus ipsum sed cursus. Ut molestie laoreet elementum. Etiam varius orci sit amet nibh luctus tincidunt quis sed nisi. Maecenas leo nisi, ornare id fermentum sit amet, ornare at sapien. Duis pellentesque, felis vitae euismod sagittis, leo lorem vestibulum neque, in gravida urna orci vel dui. Nam ligula justo, consequat at pharetra eget, auctor in sem. In placerat quam nec felis sollicitudin vitae malesuada metus eleifend. Vivamus commodo ipsum mollis risus sodales malesuada. Duis et imperdiet elit. Proin sapien lorem, fermentum vel lacinia vitae, bibendum in erat. Etiam tristique, velit non mollis blandit, turpis eros rhoncus mi, iaculis tristique est velit at lectus. Morbi commodo felis sed ligula pellentesque sed dignissim nulla eleifend.</p>
	</div><!-- /.main -->
	</div><!-- /#wrapper -->
	</body>
	</html>
	#wrapper {
	max-width: 540px;
	margin: 2em auto;
	color: #555;
	}

	h1,
	h2,
	h3 {
	visibility: hidden;
	font-family:'University W01 Bold';
	}

	.no-js h1,
	.no-js h2,
	.no-js h3,
	.mti-active h1,
	.mti-active h2,
	.mti-active h3 {
	visibility: visible;
	}