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.