Web fonts

Third-party

<html>
<head>
	<style>
		@import url(http://fonts.googleapis.com/css?family=Della+Respira);
		h4{font-family: 'Della Respira', serif; color: white;}
	</style>
</head>
<body>
	<h4>Hello world</h4>
</body>
</html>

Hello World

Hosted (with weight mapping)

<html>
<head>
	<style>
		@font-face {
    font-family: 'Orbitron';
    src: url('../fonts/orbitron_black-webfont.eot');
    src: url('../fonts/orbitron_black-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/orbitron_black-webfont.woff') format('woff'),
         url('../fonts/orbitron_black-webfont.ttf') format('truetype'),
         url('../fonts/orbitron_black-webfont.svg#OrbitronBlack') format('svg');
    font-weight: 900;
    font-style: normal;

}

@font-face {
    font-family: 'Orbitron';
    src: url('../fonts/orbitron_bold-webfont.eot');
    src: url('../fonts/orbitron_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/orbitron_bold-webfont.woff') format('woff'),
         url('../fonts/orbitron_bold-webfont.ttf') format('truetype'),
         url('../fonts/orbitron_bold-webfont.svg#OrbitronBold') format('svg');
    font-weight: 600;
    font-style: normal;

}

@font-face {
    font-family: 'Orbitron';
    src: url('../fonts/orbitron_medium-webfont.eot');
    src: url('../fonts/orbitron_medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/orbitron_medium-webfont.woff') format('woff'),
         url('../fonts/orbitron_medium-webfont.ttf') format('truetype'),
         url('../fonts/orbitron_medium-webfont.svg#OrbitronMedium') format('svg');
    font-weight: 400;
    font-style: normal;

}
@font-face {
    font-family: 'Orbitron';
    src: url('../fonts/orbitron_light-webfont.eot');
    src: url('../fonts/orbitron_light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/orbitron_light-webfont.woff') format('woff'),
         url('../fonts/orbitron_light-webfont.ttf') format('truetype'),
         url('../fonts/orbitron_light-webfont.svg#OrbitronLight') format('svg');
    font-weight: 200;
    font-style: normal;

}


h5{ font-family: 'Orbitron';}
	</style>
</head>
<body>
	<h4>Hello world</h4>
</body>
</html>
Hello World (900)
Hello World (600)
Hello World (400)
Hello World (200)

Task: Help a wrongfully convicted man.

@font-face is wrongfully convicted.

Download a free webfont from the League of Movable Type, and install it on this page, targeting 

<figcaption>
  1. Visit Font Squirrel to download a font-face kit.
  2. Insert css the code provided (fontspring format) on this page in the <head> of the document, and place all four font files provided in the same directory as this page. Set the font-family for <figcaption> to your chosen font-family.
  3. Visit The League of Movable Type and try again with another font!