How to implement webfonts on websites

Upload the webfonts (EOT, Woff and TTF) to your web server and use the CSS code example below. Replace the example URL with its appropriate path on your web server.

/* Webfonts: Copyright © 2013 by Letters From Sweden. All rights reserved. To obtain a license, please see: http://lettersfromsweden.se/webfonts */


@font-face {
    font-family: 'Trim Mono Light';
    src: url('fonts/TrimMonoWeb-Light.eot');
    src: url('fonts/TrimMonoWeb-Light.eot?') format('embedded-opentype'),
    url('fonts/TrimMonoWeb-Light.woff') format('woff'),
    url('fonts/TrimMonoWeb-Light.ttf') format('opentype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Trim Mono Medium';
    src: url('fonts/TrimMonoWeb-Medium.eot');
    src: url('fonts/TrimMonoWeb-Medium.eot?') format('embedded-opentype'),
    url('fonts/TrimMonoWeb-Medium.woff') format('woff'),
    url('fonts/TrimMonoWeb-Medium.ttf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Trim Mono Regular';
    src: url('fonts/TrimMonoWeb-Regular.eot');
    src: url('fonts/TrimMonoWeb-Regular.eot?') format('embedded-opentype'),
    url('fonts/TrimMonoWeb-Regular.woff') format('woff'),
    url('fonts/TrimMonoWeb-Regular.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Trim Mono SemiBold';
    src: url('fonts/TrimMonoWeb-SemiBold.eot');
    src: url('fonts/TrimMonoWeb-SemiBold.eot?') format('embedded-opentype'),
    url('fonts/TrimMonoWeb-SemiBold.woff') format('woff'),
    url('fonts/TrimMonoWeb-SemiBold.ttf') format('opentype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Trim Mono Bold';
    src: url('fonts/TrimMonoWeb-Bold.eot');
    src: url('fonts/TrimMonoWeb-Bold.eot?') format('embedded-opentype'),
    url('fonts/TrimMonoWeb-Bold.woff') format('woff'),
    url('fonts/TrimMonoWeb-Bold.ttf') format('opentype');
    font-weight: bold;
    font-style: normal;
}


.trimmonolight {
    font-family: 'Trim Mono Light';
    font-weight: 200;
    font-style: normal;
}

.trimmonoregular {
    font-family: 'Trim Mono Regular';
    font-weight: normal;
    font-style: normal;
}

.trimmonomedium {
    font-family: 'Trim Mono Medium';
    font-weight: 500;
    font-style: normal;
}

.trimmonosemibold {
    font-family: 'Trim Mono SemiBold';
    font-weight: 600;
    font-style: normal;
}

.trimmonobold {
    font-family: 'Trim Mono Bold';
    font-weight: bold;
    font-style: normal;
}