Amit Dhamu

Software Engineer

Embedding Fonts

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


 font embedding / css / font-face / scss / sass

Browser Selection ColourPHP Range

Show Comments

Made with by Amit Dhamu.
© MMXX. All rights reserved.