SCSS Import local ttf font

Question

I need to import true type font locally for my webside.

For remote fonts I'm always using

@import url('https://example');

but not sure how to import it from files.

I believe it's very simple but I wasn't able to find and good result.

Thank you

Answer 1

If you don't have a local .ttf font, go to a webfont conversion site, I like this one https://onlinefontconverter.com/

Select the output formats you need, I would recommend selecting .eot , .woff , and svg along with your .ttf for cross browser compatibility.

Then in your scss, use something like this to import all versions of that font for cross browser coverage.

Update: Just using formats woff + woff2 will have you covered for all modern browsers and devices

Don't forget to add fallback fonts just incase.

@mixin font($font-family, $font-file) {
  @font-face {
    font-family: $font-family;
    src: url($font-file+'.eot');
    src: url($font-file+'.eot?#iefix') format('embedded-opentype'),
         url($font-file+'.woff') format('woff'),
         url($font-file+'.ttf') format('truetype'),
         url($font-file+'.svg#'+$font-family) format('svg');
    font-weight: normal;
    font-style: normal;
  }
}


@include font('Arvo', '/htdocs/lib/fonts/Arvo');
@include font('Arvo-Bold', '/htdocs/lib/fonts/Arvo-Bold');


h1 {
  font-family: Arvo-Bold, Arial-bold, arial, sans-serif;
}

<h1>Hey Look! A headline in Arvo bold!</h1>