Use @font-face to embed fonts using CSS.
@font-face {
font-family: 'Monaco';
/* IE */
src: url(../fonts/MONACO.eot);
/* non-IE */
src: local('Monaco'), url(.. /fonts/MONACO.TTF) format('truetype');
}
.monaco {
font-family: 'Monaco';
}
Alternative SCSS Mixin
@mixin font-face($font-name, $folder, $file) {
$filepath: '/fonts/' + $folder + '/' + $file;
type: 'snippet' @font-face {
font-family: '#{$font-name}';
src: url($filepath + '.eot');
src: url($filepath + '.eot?#iefix') format('embedded-opentype'), url($filepath + '.woff')
format('woff'), url($filepath + '.ttf') format('truetype'), url($filepath + '.svg#' + $file)
format('svg');
font-weight: normal;
font-style: normal;
}
}
@include font-face(
'MyCustomFont',
'/path/to/custom/font',
'my-custom-font-filename'
);
Here's a free TTF to EOT font converter.