Commit 66cb4509 authored by venkata's avatar venkata

Added the ESC project

parent 890b9465
File added
File added
File added
<!DOCTYPE html>
<html>
<head>
<title>
DIN-BlackAlternate
- Web font preview
</title>
<style type='text/css'>
@font-face {
font-family: 'DIN-BlackAlternate';
src: url('DIN-BlackAlternate.eot?#iefix') format('embedded-opentype'), url('DIN-BlackAlternate.woff') format('woff'), url('DIN-BlackAlternate.ttf') format('truetype'), url('DIN-BlackAlternate.svg#DIN-BlackAlternate') format('svg');
font-weight: normal;
font-style: normal;
}
body { font-family: 'DIN-BlackAlternate' !important; }
h1, h2, h3, h4 { font-weight: normal; }
.reg { color:black; background:white; }
.inverse { color:white; background:black; }
div { padding: 10px 15px; }
.right { background:white; width:30%; float: right; font-family: sans-serif; border: 1px solid black; border-width: 0 0 1px 1px;}
</style>
</head>
<body>
<div class='right'>
<h3>How to Install</h3>
<h4>Step 1</h4>
<div>
Upload contents of the zip file to your web server's public directory. For example:
<code>www.yourdomain.com/css/webfont/</code>
</div>
<h4>Step 2</h4>
<div>
Add contents of
<code>styles.css</code>
to your site's style sheet.
</div>
<h4>Step 3</h4>
<div>
Make sure you adjust the paths in code from
<code>styles.css</code>
to reflect the relative path on your server.
</div>
<div>
For this example you need to prepend
<code>/css/webfont/</code>
to all
<code>src url</code>
definitions. Like this:
</div>
<div>
<code style='font-size:11px;'>@font-face {
font-family: 'DIN-BlackAlternate';
src: url('/css/webfont/DIN-BlackAlternate.eot?#iefix') format('embedded-opentype'), url('/css/webfont/DIN-BlackAlternate.woff') format('woff'), url('/css/webfont/DIN-BlackAlternate.ttf') format('truetype'), url('/css/webfont/DIN-BlackAlternate.svg#DIN-BlackAlternate') format('svg');
font-weight: normal;
font-style: normal;
}</code>
</div>
</div>
<div class='reg'>
<h1>
H1
DIN-BlackAlternate
</h1>
<h2>
H2
Donec lacinia, felis nec sagittis feugiat
</h2>
<h3>
H3
Sed ullamcorper tincidunt libero, sed tempus sem rhoncus non.
</h3>
<h4>
H4
Etiam in nulla eros, quis laoreet orci. Morbi ullamcorper tempor nunc sed ullamcorper.
</h4>
<div>
DEFAULT
In hac habitasse platea dictumst. Sed hendrerit scelerisque pellentesque. Suspendisse id eros quis sem tristique varius sed eget velit. Phasellus pellentesque ipsum non quam vulputate euismod. Nullam eget viverra lorem. Ut eu tortor metus. Mauris eget quam nulla, eu suscipit magna. Nullam vitae lectus quam, a consequat tortor. Ut sed arcu arcu. Aliquam aliquet lacinia lorem, id tristique nunc pulvinar eget.
</div>
<div>
SMALL
<small>
Proin volutpat, magna at vehicula blandit, massa lectus aliquam dolor, ut porta magna odio eu nunc. Nam nisi diam, commodo vitae hendrerit non, consequat sed est. Proin fringilla, nunc non vulputate hendrerit, turpis purus vestibulum diam, a venenatis nunc lectus nec quam. Quisque euismod fermentum mauris, at accumsan mi pulvinar in. Fusce libero lectus, fringilla non congue vel, cursus nec metus. Nunc ac ante quam.
</small>
</div>
<div>
BIG
<big>
Curabitur auctor orci vel felis sodales porttitor. Aenean non neque auctor tellus suscipit vulputate ut quis nunc. Integer tellus purus, venenatis a cursus nec, vestibulum eget turpis. Nulla pulvinar dictum elit, vulputate sodales nunc laoreet eget. Aliquam vitae urna ac risus scelerisque iaculis.
</big>
</div>
</div>
<div class='inverse'>
<h1>
H1
DIN-BlackAlternate
</h1>
<h2>
H2
Donec lacinia, felis nec sagittis feugiat
</h2>
<h3>
H3
Sed ullamcorper tincidunt libero, sed tempus sem rhoncus non.
</h3>
<h4>
H4
Etiam in nulla eros, quis laoreet orci. Morbi ullamcorper tempor nunc sed ullamcorper.
</h4>
<div>
DEFAULT
In hac habitasse platea dictumst. Sed hendrerit scelerisque pellentesque. Suspendisse id eros quis sem tristique varius sed eget velit. Phasellus pellentesque ipsum non quam vulputate euismod. Nullam eget viverra lorem. Ut eu tortor metus. Mauris eget quam nulla, eu suscipit magna. Nullam vitae lectus quam, a consequat tortor. Ut sed arcu arcu. Aliquam aliquet lacinia lorem, id tristique nunc pulvinar eget.
</div>
<div>
SMALL
<small>
Proin volutpat, magna at vehicula blandit, massa lectus aliquam dolor, ut porta magna odio eu nunc. Nam nisi diam, commodo vitae hendrerit non, consequat sed est. Proin fringilla, nunc non vulputate hendrerit, turpis purus vestibulum diam, a venenatis nunc lectus nec quam. Quisque euismod fermentum mauris, at accumsan mi pulvinar in. Fusce libero lectus, fringilla non congue vel, cursus nec metus. Nunc ac ante quam.
</small>
</div>
<div>
BIG
<big>
Curabitur auctor orci vel felis sodales porttitor. Aenean non neque auctor tellus suscipit vulputate ut quis nunc. Integer tellus purus, venenatis a cursus nec, vestibulum eget turpis. Nulla pulvinar dictum elit, vulputate sodales nunc laoreet eget. Aliquam vitae urna ac risus scelerisque iaculis.
</big>
</div>
</div>
</body>
</html>
@font-face {
font-family: 'DIN-BlackAlternate';
src: url('DIN-BlackAlternate.eot?#iefix') format('embedded-opentype'), url('DIN-BlackAlternate.woff') format('woff'), url('DIN-BlackAlternate.ttf') format('truetype'), url('DIN-BlackAlternate.svg#DIN-BlackAlternate') format('svg');
font-weight: normal;
font-style: normal;
}
File added
This diff is collapsed.
File added
File added
<!DOCTYPE html>
<html>
<head>
<title>
DIN-Bold
- Web font preview
</title>
<style type='text/css'>
@font-face {
font-family: 'DIN-Bold';
src: url('DIN-Bold.eot?#iefix') format('embedded-opentype'), url('DIN-Bold.woff') format('woff'), url('DIN-Bold.ttf') format('truetype'), url('DIN-Bold.svg#DIN-Bold') format('svg');
font-weight: normal;
font-style: normal;
}
body { font-family: 'DIN-Bold' !important; }
h1, h2, h3, h4 { font-weight: normal; }
.reg { color:black; background:white; }
.inverse { color:white; background:black; }
div { padding: 10px 15px; }
.right { background:white; width:30%; float: right; font-family: sans-serif; border: 1px solid black; border-width: 0 0 1px 1px;}
</style>
</head>
<body>
<div class='right'>
<h3>How to Install</h3>
<h4>Step 1</h4>
<div>
Upload contents of the zip file to your web server's public directory. For example:
<code>www.yourdomain.com/css/webfont/</code>
</div>
<h4>Step 2</h4>
<div>
Add contents of
<code>styles.css</code>
to your site's style sheet.
</div>
<h4>Step 3</h4>
<div>
Make sure you adjust the paths in code from
<code>styles.css</code>
to reflect the relative path on your server.
</div>
<div>
For this example you need to prepend
<code>/css/webfont/</code>
to all
<code>src url</code>
definitions. Like this:
</div>
<div>
<code style='font-size:11px;'>@font-face {
font-family: 'DIN-Bold';
src: url('/css/webfont/DIN-Bold.eot?#iefix') format('embedded-opentype'), url('/css/webfont/DIN-Bold.woff') format('woff'), url('/css/webfont/DIN-Bold.ttf') format('truetype'), url('/css/webfont/DIN-Bold.svg#DIN-Bold') format('svg');
font-weight: normal;
font-style: normal;
}</code>
</div>
</div>
<div class='reg'>
<h1>
H1
DIN-Bold
</h1>
<h2>
H2
Donec lacinia, felis nec sagittis feugiat
</h2>
<h3>
H3
Sed ullamcorper tincidunt libero, sed tempus sem rhoncus non.
</h3>
<h4>
H4
Etiam in nulla eros, quis laoreet orci. Morbi ullamcorper tempor nunc sed ullamcorper.
</h4>
<div>
DEFAULT
In hac habitasse platea dictumst. Sed hendrerit scelerisque pellentesque. Suspendisse id eros quis sem tristique varius sed eget velit. Phasellus pellentesque ipsum non quam vulputate euismod. Nullam eget viverra lorem. Ut eu tortor metus. Mauris eget quam nulla, eu suscipit magna. Nullam vitae lectus quam, a consequat tortor. Ut sed arcu arcu. Aliquam aliquet lacinia lorem, id tristique nunc pulvinar eget.
</div>
<div>
SMALL
<small>
Proin volutpat, magna at vehicula blandit, massa lectus aliquam dolor, ut porta magna odio eu nunc. Nam nisi diam, commodo vitae hendrerit non, consequat sed est. Proin fringilla, nunc non vulputate hendrerit, turpis purus vestibulum diam, a venenatis nunc lectus nec quam. Quisque euismod fermentum mauris, at accumsan mi pulvinar in. Fusce libero lectus, fringilla non congue vel, cursus nec metus. Nunc ac ante quam.
</small>
</div>
<div>
BIG
<big>
Curabitur auctor orci vel felis sodales porttitor. Aenean non neque auctor tellus suscipit vulputate ut quis nunc. Integer tellus purus, venenatis a cursus nec, vestibulum eget turpis. Nulla pulvinar dictum elit, vulputate sodales nunc laoreet eget. Aliquam vitae urna ac risus scelerisque iaculis.
</big>
</div>
</div>
<div class='inverse'>
<h1>
H1
DIN-Bold
</h1>
<h2>
H2
Donec lacinia, felis nec sagittis feugiat
</h2>
<h3>
H3
Sed ullamcorper tincidunt libero, sed tempus sem rhoncus non.
</h3>
<h4>
H4
Etiam in nulla eros, quis laoreet orci. Morbi ullamcorper tempor nunc sed ullamcorper.
</h4>
<div>
DEFAULT
In hac habitasse platea dictumst. Sed hendrerit scelerisque pellentesque. Suspendisse id eros quis sem tristique varius sed eget velit. Phasellus pellentesque ipsum non quam vulputate euismod. Nullam eget viverra lorem. Ut eu tortor metus. Mauris eget quam nulla, eu suscipit magna. Nullam vitae lectus quam, a consequat tortor. Ut sed arcu arcu. Aliquam aliquet lacinia lorem, id tristique nunc pulvinar eget.
</div>
<div>
SMALL
<small>
Proin volutpat, magna at vehicula blandit, massa lectus aliquam dolor, ut porta magna odio eu nunc. Nam nisi diam, commodo vitae hendrerit non, consequat sed est. Proin fringilla, nunc non vulputate hendrerit, turpis purus vestibulum diam, a venenatis nunc lectus nec quam. Quisque euismod fermentum mauris, at accumsan mi pulvinar in. Fusce libero lectus, fringilla non congue vel, cursus nec metus. Nunc ac ante quam.
</small>
</div>
<div>
BIG
<big>
Curabitur auctor orci vel felis sodales porttitor. Aenean non neque auctor tellus suscipit vulputate ut quis nunc. Integer tellus purus, venenatis a cursus nec, vestibulum eget turpis. Nulla pulvinar dictum elit, vulputate sodales nunc laoreet eget. Aliquam vitae urna ac risus scelerisque iaculis.
</big>
</div>
</div>
</body>
</html>
@font-face {
font-family: 'DIN-Bold';
src: url('DIN-Bold.eot?#iefix') format('embedded-opentype'), url('DIN-Bold.woff') format('woff'), url('DIN-Bold.ttf') format('truetype'), url('DIN-Bold.svg#DIN-Bold') format('svg');
font-weight: normal;
font-style: normal;
}
File added
This diff is collapsed.
File added
File added
<!DOCTYPE html>
<html>
<head>
<title>
DIN-Light
- Web font preview
</title>
<style type='text/css'>
@font-face {
font-family: 'DIN-Light';
src: url('DIN-Light.eot?#iefix') format('embedded-opentype'), url('DIN-Light.woff') format('woff'), url('DIN-Light.ttf') format('truetype'), url('DIN-Light.svg#DIN-Light') format('svg');
font-weight: normal;
font-style: normal;
}
body { font-family: 'DIN-Light' !important; }
h1, h2, h3, h4 { font-weight: normal; }
.reg { color:black; background:white; }
.inverse { color:white; background:black; }
div { padding: 10px 15px; }
.right { background:white; width:30%; float: right; font-family: sans-serif; border: 1px solid black; border-width: 0 0 1px 1px;}
</style>
</head>
<body>
<div class='right'>
<h3>How to Install</h3>
<h4>Step 1</h4>
<div>
Upload contents of the zip file to your web server's public directory. For example:
<code>www.yourdomain.com/css/webfont/</code>
</div>
<h4>Step 2</h4>
<div>
Add contents of
<code>styles.css</code>
to your site's style sheet.
</div>
<h4>Step 3</h4>
<div>
Make sure you adjust the paths in code from
<code>styles.css</code>
to reflect the relative path on your server.
</div>
<div>
For this example you need to prepend
<code>/css/webfont/</code>
to all
<code>src url</code>
definitions. Like this:
</div>
<div>
<code style='font-size:11px;'>@font-face {
font-family: 'DIN-Light';
src: url('/css/webfont/DIN-Light.eot?#iefix') format('embedded-opentype'), url('/css/webfont/DIN-Light.woff') format('woff'), url('/css/webfont/DIN-Light.ttf') format('truetype'), url('/css/webfont/DIN-Light.svg#DIN-Light') format('svg');
font-weight: normal;
font-style: normal;
}</code>
</div>
</div>
<div class='reg'>
<h1>
H1
DIN-Light
</h1>
<h2>
H2
Donec lacinia, felis nec sagittis feugiat
</h2>
<h3>
H3
Sed ullamcorper tincidunt libero, sed tempus sem rhoncus non.
</h3>
<h4>
H4
Etiam in nulla eros, quis laoreet orci. Morbi ullamcorper tempor nunc sed ullamcorper.
</h4>
<div>
DEFAULT
In hac habitasse platea dictumst. Sed hendrerit scelerisque pellentesque. Suspendisse id eros quis sem tristique varius sed eget velit. Phasellus pellentesque ipsum non quam vulputate euismod. Nullam eget viverra lorem. Ut eu tortor metus. Mauris eget quam nulla, eu suscipit magna. Nullam vitae lectus quam, a consequat tortor. Ut sed arcu arcu. Aliquam aliquet lacinia lorem, id tristique nunc pulvinar eget.
</div>
<div>
SMALL
<small>
Proin volutpat, magna at vehicula blandit, massa lectus aliquam dolor, ut porta magna odio eu nunc. Nam nisi diam, commodo vitae hendrerit non, consequat sed est. Proin fringilla, nunc non vulputate hendrerit, turpis purus vestibulum diam, a venenatis nunc lectus nec quam. Quisque euismod fermentum mauris, at accumsan mi pulvinar in. Fusce libero lectus, fringilla non congue vel, cursus nec metus. Nunc ac ante quam.
</small>
</div>
<div>
BIG
<big>
Curabitur auctor orci vel felis sodales porttitor. Aenean non neque auctor tellus suscipit vulputate ut quis nunc. Integer tellus purus, venenatis a cursus nec, vestibulum eget turpis. Nulla pulvinar dictum elit, vulputate sodales nunc laoreet eget. Aliquam vitae urna ac risus scelerisque iaculis.
</big>
</div>
</div>
<div class='inverse'>
<h1>
H1
DIN-Light
</h1>
<h2>
H2
Donec lacinia, felis nec sagittis feugiat
</h2>
<h3>
H3
Sed ullamcorper tincidunt libero, sed tempus sem rhoncus non.
</h3>
<h4>
H4
Etiam in nulla eros, quis laoreet orci. Morbi ullamcorper tempor nunc sed ullamcorper.
</h4>
<div>
DEFAULT
In hac habitasse platea dictumst. Sed hendrerit scelerisque pellentesque. Suspendisse id eros quis sem tristique varius sed eget velit. Phasellus pellentesque ipsum non quam vulputate euismod. Nullam eget viverra lorem. Ut eu tortor metus. Mauris eget quam nulla, eu suscipit magna. Nullam vitae lectus quam, a consequat tortor. Ut sed arcu arcu. Aliquam aliquet lacinia lorem, id tristique nunc pulvinar eget.
</div>
<div>
SMALL
<small>
Proin volutpat, magna at vehicula blandit, massa lectus aliquam dolor, ut porta magna odio eu nunc. Nam nisi diam, commodo vitae hendrerit non, consequat sed est. Proin fringilla, nunc non vulputate hendrerit, turpis purus vestibulum diam, a venenatis nunc lectus nec quam. Quisque euismod fermentum mauris, at accumsan mi pulvinar in. Fusce libero lectus, fringilla non congue vel, cursus nec metus. Nunc ac ante quam.
</small>
</div>
<div>
BIG
<big>
Curabitur auctor orci vel felis sodales porttitor. Aenean non neque auctor tellus suscipit vulputate ut quis nunc. Integer tellus purus, venenatis a cursus nec, vestibulum eget turpis. Nulla pulvinar dictum elit, vulputate sodales nunc laoreet eget. Aliquam vitae urna ac risus scelerisque iaculis.
</big>
</div>
</div>
</body>
</html>
@font-face {
font-family: 'DIN-Light';
src: url('DIN-Light.eot?#iefix') format('embedded-opentype'), url('DIN-Light.woff') format('woff'), url('DIN-Light.ttf') format('truetype'), url('DIN-Light.svg#DIN-Light') format('svg');
font-weight: normal;
font-style: normal;
}
File added
File added
File added
<!DOCTYPE html>
<html>
<head>
<title>
DIN-LightAlternate
- Web font preview
</title>
<style type='text/css'>
@font-face {
font-family: 'DIN-LightAlternate';
src: url('DIN-LightAlternate.eot?#iefix') format('embedded-opentype'), url('DIN-LightAlternate.woff') format('woff'), url('DIN-LightAlternate.ttf') format('truetype'), url('DIN-LightAlternate.svg#DIN-LightAlternate') format('svg');
font-weight: normal;
font-style: normal;
}
body { font-family: 'DIN-LightAlternate' !important; }
h1, h2, h3, h4 { font-weight: normal; }
.reg { color:black; background:white; }
.inverse { color:white; background:black; }
div { padding: 10px 15px; }
.right { background:white; width:30%; float: right; font-family: sans-serif; border: 1px solid black; border-width: 0 0 1px 1px;}
</style>
</head>
<body>
<div class='right'>
<h3>How to Install</h3>
<h4>Step 1</h4>
<div>
Upload contents of the zip file to your web server's public directory. For example:
<code>www.yourdomain.com/css/webfont/</code>
</div>
<h4>Step 2</h4>
<div>
Add contents of
<code>styles.css</code>
to your site's style sheet.
</div>
<h4>Step 3</h4>
<div>
Make sure you adjust the paths in code from
<code>styles.css</code>
to reflect the relative path on your server.
</div>
<div>
For this example you need to prepend
<code>/css/webfont/</code>
to all
<code>src url</code>
definitions. Like this:
</div>
<div>
<code style='font-size:11px;'>@font-face {
font-family: 'DIN-LightAlternate';
src: url('/css/webfont/DIN-LightAlternate.eot?#iefix') format('embedded-opentype'), url('/css/webfont/DIN-LightAlternate.woff') format('woff'), url('/css/webfont/DIN-LightAlternate.ttf') format('truetype'), url('/css/webfont/DIN-LightAlternate.svg#DIN-LightAlternate') format('svg');
font-weight: normal;
font-style: normal;
}</code>
</div>
</div>
<div class='reg'>
<h1>
H1
DIN-LightAlternate
</h1>
<h2>
H2
Donec lacinia, felis nec sagittis feugiat
</h2>
<h3>
H3
Sed ullamcorper tincidunt libero, sed tempus sem rhoncus non.
</h3>
<h4>
H4
Etiam in nulla eros, quis laoreet orci. Morbi ullamcorper tempor nunc sed ullamcorper.
</h4>
<div>
DEFAULT
In hac habitasse platea dictumst. Sed hendrerit scelerisque pellentesque. Suspendisse id eros quis sem tristique varius sed eget velit. Phasellus pellentesque ipsum non quam vulputate euismod. Nullam eget viverra lorem. Ut eu tortor metus. Mauris eget quam nulla, eu suscipit magna. Nullam vitae lectus quam, a consequat tortor. Ut sed arcu arcu. Aliquam aliquet lacinia lorem, id tristique nunc pulvinar eget.
</div>
<div>
SMALL
<small>
Proin volutpat, magna at vehicula blandit, massa lectus aliquam dolor, ut porta magna odio eu nunc. Nam nisi diam, commodo vitae hendrerit non, consequat sed est. Proin fringilla, nunc non vulputate hendrerit, turpis purus vestibulum diam, a venenatis nunc lectus nec quam. Quisque euismod fermentum mauris, at accumsan mi pulvinar in. Fusce libero lectus, fringilla non congue vel, cursus nec metus. Nunc ac ante quam.
</small>
</div>
<div>
BIG
<big>
Curabitur auctor orci vel felis sodales porttitor. Aenean non neque auctor tellus suscipit vulputate ut quis nunc. Integer tellus purus, venenatis a cursus nec, vestibulum eget turpis. Nulla pulvinar dictum elit, vulputate sodales nunc laoreet eget. Aliquam vitae urna ac risus scelerisque iaculis.
</big>
</div>
</div>
<div class='inverse'>
<h1>
H1
DIN-LightAlternate
</h1>
<h2>
H2
Donec lacinia, felis nec sagittis feugiat
</h2>
<h3>
H3
Sed ullamcorper tincidunt libero, sed tempus sem rhoncus non.
</h3>
<h4>
H4
Etiam in nulla eros, quis laoreet orci. Morbi ullamcorper tempor nunc sed ullamcorper.
</h4>
<div>
DEFAULT
In hac habitasse platea dictumst. Sed hendrerit scelerisque pellentesque. Suspendisse id eros quis sem tristique varius sed eget velit. Phasellus pellentesque ipsum non quam vulputate euismod. Nullam eget viverra lorem. Ut eu tortor metus. Mauris eget quam nulla, eu suscipit magna. Nullam vitae lectus quam, a consequat tortor. Ut sed arcu arcu. Aliquam aliquet lacinia lorem, id tristique nunc pulvinar eget.
</div>
<div>
SMALL
<small>
Proin volutpat, magna at vehicula blandit, massa lectus aliquam dolor, ut porta magna odio eu nunc. Nam nisi diam, commodo vitae hendrerit non, consequat sed est. Proin fringilla, nunc non vulputate hendrerit, turpis purus vestibulum diam, a venenatis nunc lectus nec quam. Quisque euismod fermentum mauris, at accumsan mi pulvinar in. Fusce libero lectus, fringilla non congue vel, cursus nec metus. Nunc ac ante quam.
</small>
</div>
<div>
BIG
<big>
Curabitur auctor orci vel felis sodales porttitor. Aenean non neque auctor tellus suscipit vulputate ut quis nunc. Integer tellus purus, venenatis a cursus nec, vestibulum eget turpis. Nulla pulvinar dictum elit, vulputate sodales nunc laoreet eget. Aliquam vitae urna ac risus scelerisque iaculis.
</big>
</div>
</div>
</body>
</html>
@font-face {
font-family: 'DIN-LightAlternate';
src: url('DIN-LightAlternate.eot?#iefix') format('embedded-opentype'), url('DIN-LightAlternate.woff') format('woff'), url('DIN-LightAlternate.ttf') format('truetype'), url('DIN-LightAlternate.svg#DIN-LightAlternate') format('svg');
font-weight: normal;
font-style: normal;
}
File added
File added
File added
<!DOCTYPE html>
<html>
<head>
<title>
DIN-Medium
- Web font preview
</title>
<style type='text/css'>
@font-face {
font-family: 'DIN-Medium';
src: url('DIN-Medium.eot?#iefix') format('embedded-opentype'), url('DIN-Medium.woff') format('woff'), url('DIN-Medium.ttf') format('truetype'), url('DIN-Medium.svg#DIN-Medium') format('svg');
font-weight: normal;
font-style: normal;
}
body { font-family: 'DIN-Medium' !important; }
h1, h2, h3, h4 { font-weight: normal; }
.reg { color:black; background:white; }
.inverse { color:white; background:black; }
div { padding: 10px 15px; }
.right { background:white; width:30%; float: right; font-family: sans-serif; border: 1px solid black; border-width: 0 0 1px 1px;}
</style>
</head>
<body>
<div class='right'>
<h3>How to Install</h3>
<h4>Step 1</h4>
<div>
Upload contents of the zip file to your web server's public directory. For example:
<code>www.yourdomain.com/css/webfont/</code>
</div>
<h4>Step 2</h4>
<div>
Add contents of
<code>styles.css</code>
to your site's style sheet.
</div>
<h4>Step 3</h4>
<div>
Make sure you adjust the paths in code from
<code>styles.css</code>
to reflect the relative path on your server.
</div>
<div>
For this example you need to prepend
<code>/css/webfont/</code>
to all
<code>src url</code>
definitions. Like this:
</div>
<div>
<code style='font-size:11px;'>@font-face {
font-family: 'DIN-Medium';
src: url('/css/webfont/DIN-Medium.eot?#iefix') format('embedded-opentype'), url('/css/webfont/DIN-Medium.woff') format('woff'), url('/css/webfont/DIN-Medium.ttf') format('truetype'), url('/css/webfont/DIN-Medium.svg#DIN-Medium') format('svg');
font-weight: normal;
font-style: normal;
}</code>
</div>
</div>
<div class='reg'>
<h1>
H1
DIN-Medium
</h1>
<h2>
H2
Donec lacinia, felis nec sagittis feugiat
</h2>
<h3>
H3
Sed ullamcorper tincidunt libero, sed tempus sem rhoncus non.
</h3>
<h4>
H4
Etiam in nulla eros, quis laoreet orci. Morbi ullamcorper tempor nunc sed ullamcorper.
</h4>
<div>
DEFAULT
In hac habitasse platea dictumst. Sed hendrerit scelerisque pellentesque. Suspendisse id eros quis sem tristique varius sed eget velit. Phasellus pellentesque ipsum non quam vulputate euismod. Nullam eget viverra lorem. Ut eu tortor metus. Mauris eget quam nulla, eu suscipit magna. Nullam vitae lectus quam, a consequat tortor. Ut sed arcu arcu. Aliquam aliquet lacinia lorem, id tristique nunc pulvinar eget.
</div>
<div>
SMALL
<small>
Proin volutpat, magna at vehicula blandit, massa lectus aliquam dolor, ut porta magna odio eu nunc. Nam nisi diam, commodo vitae hendrerit non, consequat sed est. Proin fringilla, nunc non vulputate hendrerit, turpis purus vestibulum diam, a venenatis nunc lectus nec quam. Quisque euismod fermentum mauris, at accumsan mi pulvinar in. Fusce libero lectus, fringilla non congue vel, cursus nec metus. Nunc ac ante quam.
</small>
</div>
<div>
BIG
<big>
Curabitur auctor orci vel felis sodales porttitor. Aenean non neque auctor tellus suscipit vulputate ut quis nunc. Integer tellus purus, venenatis a cursus nec, vestibulum eget turpis. Nulla pulvinar dictum elit, vulputate sodales nunc laoreet eget. Aliquam vitae urna ac risus scelerisque iaculis.
</big>
</div>
</div>
<div class='inverse'>
<h1>
H1
DIN-Medium
</h1>
<h2>
H2
Donec lacinia, felis nec sagittis feugiat
</h2>
<h3>
H3
Sed ullamcorper tincidunt libero, sed tempus sem rhoncus non.
</h3>
<h4>
H4
Etiam in nulla eros, quis laoreet orci. Morbi ullamcorper tempor nunc sed ullamcorper.
</h4>
<div>
DEFAULT
In hac habitasse platea dictumst. Sed hendrerit scelerisque pellentesque. Suspendisse id eros quis sem tristique varius sed eget velit. Phasellus pellentesque ipsum non quam vulputate euismod. Nullam eget viverra lorem. Ut eu tortor metus. Mauris eget quam nulla, eu suscipit magna. Nullam vitae lectus quam, a consequat tortor. Ut sed arcu arcu. Aliquam aliquet lacinia lorem, id tristique nunc pulvinar eget.
</div>
<div>
SMALL
<small>
Proin volutpat, magna at vehicula blandit, massa lectus aliquam dolor, ut porta magna odio eu nunc. Nam nisi diam, commodo vitae hendrerit non, consequat sed est. Proin fringilla, nunc non vulputate hendrerit, turpis purus vestibulum diam, a venenatis nunc lectus nec quam. Quisque euismod fermentum mauris, at accumsan mi pulvinar in. Fusce libero lectus, fringilla non congue vel, cursus nec metus. Nunc ac ante quam.
</small>
</div>
<div>
BIG
<big>
Curabitur auctor orci vel felis sodales porttitor. Aenean non neque auctor tellus suscipit vulputate ut quis nunc. Integer tellus purus, venenatis a cursus nec, vestibulum eget turpis. Nulla pulvinar dictum elit, vulputate sodales nunc laoreet eget. Aliquam vitae urna ac risus scelerisque iaculis.
</big>
</div>
</div>
</body>
</html>
@font-face {
font-family: 'DIN-Medium';
src: url('DIN-Medium.eot?#iefix') format('embedded-opentype'), url('DIN-Medium.woff') format('woff'), url('DIN-Medium.ttf') format('truetype'), url('DIN-Medium.svg#DIN-Medium') format('svg');
font-weight: normal;
font-style: normal;
}
File added
File added
<!DOCTYPE html>
<html>
<head>
<title>
DIN-MediumAlternate
- Web font preview
</title>
<style type='text/css'>
@font-face {
font-family: 'DIN-MediumAlternate';
src: url('DIN-MediumAlternate.eot?#iefix') format('embedded-opentype'), url('DIN-MediumAlternate.woff') format('woff'), url('DIN-MediumAlternate.ttf') format('truetype'), url('DIN-MediumAlternate.svg#DIN-MediumAlternate') format('svg');
font-weight: normal;
font-style: normal;
}
body { font-family: 'DIN-MediumAlternate' !important; }
h1, h2, h3, h4 { font-weight: normal; }
.reg { color:black; background:white; }
.inverse { color:white; background:black; }
div { padding: 10px 15px; }
.right { background:white; width:30%; float: right; font-family: sans-serif; border: 1px solid black; border-width: 0 0 1px 1px;}
</style>
</head>
<body>
<div class='right'>
<h3>How to Install</h3>
<h4>Step 1</h4>
<div>
Upload contents of the zip file to your web server's public directory. For example:
<code>www.yourdomain.com/css/webfont/</code>
</div>
<h4>Step 2</h4>
<div>
Add contents of
<code>styles.css</code>
to your site's style sheet.
</div>
<h4>Step 3</h4>
<div>
Make sure you adjust the paths in code from
<code>styles.css</code>
to reflect the relative path on your server.
</div>
<div>
For this example you need to prepend
<code>/css/webfont/</code>
to all
<code>src url</code>
definitions. Like this:
</div>
<div>
<code style='font-size:11px;'>@font-face {
font-family: 'DIN-MediumAlternate';
src: url('/css/webfont/DIN-MediumAlternate.eot?#iefix') format('embedded-opentype'), url('/css/webfont/DIN-MediumAlternate.woff') format('woff'), url('/css/webfont/DIN-MediumAlternate.ttf') format('truetype'), url('/css/webfont/DIN-MediumAlternate.svg#DIN-MediumAlternate') format('svg');
font-weight: normal;
font-style: normal;
}</code>
</div>
</div>
<div class='reg'>
<h1>
H1
DIN-MediumAlternate
</h1>
<h2>
H2
Donec lacinia, felis nec sagittis feugiat
</h2>
<h3>
H3
Sed ullamcorper tincidunt libero, sed tempus sem rhoncus non.
</h3>
<h4>
H4
Etiam in nulla eros, quis laoreet orci. Morbi ullamcorper tempor nunc sed ullamcorper.
</h4>
<div>
DEFAULT
In hac habitasse platea dictumst. Sed hendrerit scelerisque pellentesque. Suspendisse id eros quis sem tristique varius sed eget velit. Phasellus pellentesque ipsum non quam vulputate euismod. Nullam eget viverra lorem. Ut eu tortor metus. Mauris eget quam nulla, eu suscipit magna. Nullam vitae lectus quam, a consequat tortor. Ut sed arcu arcu. Aliquam aliquet lacinia lorem, id tristique nunc pulvinar eget.
</div>
<div>
SMALL
<small>
Proin volutpat, magna at vehicula blandit, massa lectus aliquam dolor, ut porta magna odio eu nunc. Nam nisi diam, commodo vitae hendrerit non, consequat sed est. Proin fringilla, nunc non vulputate hendrerit, turpis purus vestibulum diam, a venenatis nunc lectus nec quam. Quisque euismod fermentum mauris, at accumsan mi pulvinar in. Fusce libero lectus, fringilla non congue vel, cursus nec metus. Nunc ac ante quam.
</small>
</div>
<div>
BIG
<big>
Curabitur auctor orci vel felis sodales porttitor. Aenean non neque auctor tellus suscipit vulputate ut quis nunc. Integer tellus purus, venenatis a cursus nec, vestibulum eget turpis. Nulla pulvinar dictum elit, vulputate sodales nunc laoreet eget. Aliquam vitae urna ac risus scelerisque iaculis.
</big>
</div>
</div>
<div class='inverse'>
<h1>
H1
DIN-MediumAlternate
</h1>
<h2>
H2
Donec lacinia, felis nec sagittis feugiat
</h2>
<h3>
H3
Sed ullamcorper tincidunt libero, sed tempus sem rhoncus non.
</h3>
<h4>
H4
Etiam in nulla eros, quis laoreet orci. Morbi ullamcorper tempor nunc sed ullamcorper.
</h4>
<div>
DEFAULT
In hac habitasse platea dictumst. Sed hendrerit scelerisque pellentesque. Suspendisse id eros quis sem tristique varius sed eget velit. Phasellus pellentesque ipsum non quam vulputate euismod. Nullam eget viverra lorem. Ut eu tortor metus. Mauris eget quam nulla, eu suscipit magna. Nullam vitae lectus quam, a consequat tortor. Ut sed arcu arcu. Aliquam aliquet lacinia lorem, id tristique nunc pulvinar eget.
</div>
<div>
SMALL
<small>
Proin volutpat, magna at vehicula blandit, massa lectus aliquam dolor, ut porta magna odio eu nunc. Nam nisi diam, commodo vitae hendrerit non, consequat sed est. Proin fringilla, nunc non vulputate hendrerit, turpis purus vestibulum diam, a venenatis nunc lectus nec quam. Quisque euismod fermentum mauris, at accumsan mi pulvinar in. Fusce libero lectus, fringilla non congue vel, cursus nec metus. Nunc ac ante quam.
</small>
</div>
<div>
BIG
<big>
Curabitur auctor orci vel felis sodales porttitor. Aenean non neque auctor tellus suscipit vulputate ut quis nunc. Integer tellus purus, venenatis a cursus nec, vestibulum eget turpis. Nulla pulvinar dictum elit, vulputate sodales nunc laoreet eget. Aliquam vitae urna ac risus scelerisque iaculis.
</big>
</div>
</div>
</body>
</html>
@font-face {
font-family: 'DIN-MediumAlternate';
src: url('DIN-MediumAlternate.eot?#iefix') format('embedded-opentype'), url('DIN-MediumAlternate.woff') format('woff'), url('DIN-MediumAlternate.ttf') format('truetype'), url('DIN-MediumAlternate.svg#DIN-MediumAlternate') format('svg');
font-weight: normal;
font-style: normal;
}
File added
File added
File added
This diff is collapsed.
@font-face {
font-family: 'DIN-Regular';
src: url('DIN-Regular.eot?#iefix') format('embedded-opentype'), url('DIN-Regular.woff') format('woff'), url('DIN-Regular.ttf') format('truetype'), url('DIN-Regular.svg#DIN-Regular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'DIN-RegularAlternate';
src: url('DIN-RegularAlternate.eot?#iefix') format('embedded-opentype'), url('DIN-RegularAlternate.woff') format('woff'), url('DIN-RegularAlternate.ttf') format('truetype'), url('DIN-RegularAlternate.svg#DIN-RegularAlternate') format('svg');
font-weight: normal;
font-style: normal;
}
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
File added
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment