ajchemist · May 29, 2016 08:10
diff --git a/TypeFace.html b/TypeFace.html
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>

 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 	<title>Lorem ipsum</title>
 	
 	<style type="text/css">

 		body {
 			text-rendering: optimizeLegibility;
 			font-feature-settings: "kern";
 			-moz-font-feature-settings: "kern=1";
 			-ms-font-feature-settings: "kern";
 			-webkit-font-feature-settings: "kern";
 			-o-font-feature-settings: "kern";
 		}

 		@font-face {
 			font-family: 'TypefaceSVG';
 			src: url('Typeface.svg#Typeface') format('svg');
 		}
 	
 		@font-face {
 			font-family: 'TypefaceTTF';
 			src: url('Typeface.ttf') format('truetype');
 		} 
 		
 		@font-face {
 			font-family: 'TypefaceEOT';
 			src: url('Typeface.eot');
 		} 
 		
 			
 		h1 {
 			font-weight:normal;
 			margin: 0 0 5px 0;
 			color: #afafaf;
 		}

 		h2 {
 			font-weight:normal;
 			margin: 0 0 5px 0;
 			color: #afafaf;
 		}
 		
 		h3 {
 			font-weight:normal;
 			margin: 0 0 5px 0;
 			color: #afafaf;
 		}
 		
 		h4 {
 			font-weight:normal;
 			margin: 0 0 5px 0;
 			color: #afafaf;
 		}
 		
 		p {
 			margin: 0 0 5px 0;
 			color: #000000;
 		}
 		
 		body {
 			margin: 30px 0 0 30px;
 		}
 		
 		div {
 			font-family: 'TypefaceEOT', 'TypefaceTTF', 'TypefaceSVG';
 			margin: 0 0 30px 0;
 		}

 		h1.bigger {
 			font-size: 58pt;
 		}

 		h2.big {
 			font-size: 40pt;
 		}
 		
 		h3.small {
 			font-size: 32pt;
 		}

 		h4.smaller {
 			font-size: 18pt;
 		}

 		h1.percent {
 			font-size: 100%;
 		}		
 		
 		p.bigger {
 			font-size: 32pt;
 		}

 		p.big {
 			font-size: 24pt;
 		}
 		
 		p.small {
 			font-size: 18pt;
 		}

 		p.smaller {
 			font-size: 12pt;
 		}

 	</style>
 	
 </head>
 <body>

 <div>
 	<h1 class="bigger">Lorem ipsum</h1>
 	<p class="bigger">Dolor sit amet!</p>
 </div>

 <div>
 	<h2 class="big">Hamburgerfonstiv</h2>
 	<p class="big">Typeface</p>
 </div>

 <div>
 	<h3 class="big">Handgloves & Mittoms</h3>
 	<p class="big">Bibliography</p>
 </p>
 </div>

 <div>
 	<h4 class="smaller">Headline 16pt</h4>
 	<p class="smaller">Ett litet stycke svalhjärta.</p>	
 </div>

 <div>
 	<h4 class="smaller">Alphabet</h4>
 	<p class="smaller">a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
 	<p class="smaller">A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>
 	<p class="smaller">0 1 2 3 4 5 6 7 8 9</p>
 </div>

 </body>
 </html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	<html>
	<head>

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Lorem ipsum</title>

	<style type="text/css">

	body {
	text-rendering: optimizeLegibility;
	font-feature-settings: "kern";
	-moz-font-feature-settings: "kern=1";
	-ms-font-feature-settings: "kern";
	-webkit-font-feature-settings: "kern";
	-o-font-feature-settings: "kern";
	}

	@font-face {
	font-family: 'TypefaceSVG';
	src: url('Typeface.svg#Typeface') format('svg');
	}

	@font-face {
	font-family: 'TypefaceTTF';
	src: url('Typeface.ttf') format('truetype');
	}

	@font-face {
	font-family: 'TypefaceEOT';
	src: url('Typeface.eot');
	}


	h1 {
	font-weight:normal;
	margin: 0 0 5px 0;
	color: #afafaf;
	}

	h2 {
	font-weight:normal;
	margin: 0 0 5px 0;
	color: #afafaf;
	}

	h3 {
	font-weight:normal;
	margin: 0 0 5px 0;
	color: #afafaf;
	}

	h4 {
	font-weight:normal;
	margin: 0 0 5px 0;
	color: #afafaf;
	}

	p {
	margin: 0 0 5px 0;
	color: #000000;
	}

	body {
	margin: 30px 0 0 30px;
	}

	div {
	font-family: 'TypefaceEOT', 'TypefaceTTF', 'TypefaceSVG';
	margin: 0 0 30px 0;
	}

	h1.bigger {
	font-size: 58pt;
	}

	h2.big {
	font-size: 40pt;
	}

	h3.small {
	font-size: 32pt;
	}

	h4.smaller {
	font-size: 18pt;
	}

	h1.percent {
	font-size: 100%;
	}

	p.bigger {
	font-size: 32pt;
	}

	p.big {
	font-size: 24pt;
	}

	p.small {
	font-size: 18pt;
	}

	p.smaller {
	font-size: 12pt;
	}

	</style>

	</head>
	<body>

	<div>
	<h1 class="bigger">Lorem ipsum</h1>
	<p class="bigger">Dolor sit amet!</p>
	</div>

	<div>
	<h2 class="big">Hamburgerfonstiv</h2>
	<p class="big">Typeface</p>
	</div>

	<div>
	<h3 class="big">Handgloves & Mittoms</h3>
	<p class="big">Bibliography</p>
	</p>
	</div>

	<div>
	<h4 class="smaller">Headline 16pt</h4>
	<p class="smaller">Ett litet stycke svalhjärta.</p>
	</div>

	<div>
	<h4 class="smaller">Alphabet</h4>
	<p class="smaller">a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
	<p class="smaller">A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>
	<p class="smaller">0 1 2 3 4 5 6 7 8 9</p>
	</div>

	</body>
	</html>