Amit Dhamu

Writes Code

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');
}


// Usage
.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 Colour Copy To Clipboard In Flex →