d
Amit DhamuSoftware Engineer
 

Embedding Fonts

1 minute read 00000 views

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.