How to Install

Step 1

Upload contents of the zip file to your web server's public directory. For example: www.yourdomain.com/css/webfont/

Step 2

Add contents of styles.css to your site's style sheet.

Step 3

Make sure you adjust the paths in code from styles.css to reflect the relative path on your server.
For this example you need to prepend /css/webfont/ to all src url definitions. Like this:
@font-face { font-family: 'Mikelinelements'; src: url('/css/webfont/Mikelinelements.eot') format('embedded-opentype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Mikelinelements'; src: url('/css/webfont/Mikelinelements.otf') format('opentype'), url(data:application/x-font-woff;charset=utf-8;base64,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 008IIAAAAADTUZ96) format('woff'), url('/css/webfont/Mikelinelements.ttf') format('truetype'), url('/css/webfont/Mikelinelements.svg#Mikelinelements') format('svg'); font-weight: normal; font-style: normal; }

H1 Mikelinelements

H2 Donec lacinia, felis nec sagittis feugiat

H3 Sed ullamcorper tincidunt libero, sed tempus sem rhoncus non.

H4 Etiam in nulla eros, quis laoreet orci. Morbi ullamcorper tempor nunc sed ullamcorper.

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.
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.
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.

H1 Mikelinelements

H2 Donec lacinia, felis nec sagittis feugiat

H3 Sed ullamcorper tincidunt libero, sed tempus sem rhoncus non.

H4 Etiam in nulla eros, quis laoreet orci. Morbi ullamcorper tempor nunc sed ullamcorper.

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.
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.
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.