E
E
Ever-Green2017-05-04 08:49:28
Sass
Ever-Green, 2017-05-04 08:49:28

How to include a font in sass?

I just can’t find a full-fledged example of including a font in sass, even if I find it, it doesn’t work for me.
For example:

@font-face
    font-family:'Font' // Коала ругает эту строку
    src: url('Font.eot')
    src: url('Font.eot?#iefix') format('embedded-opentype'),
        url('Font.woff2') format('woff2'), // И эту
        url('Font.woff') format('woff'),
        url('Font.ttf') format('truetype'),
        url('Font.svg#SF UI Display Bold') format('svg')
    font-weight: 700
    font-style: normal
    font-stretch: normal
    unicode-range: U+0020-00FE

Many show this as an example, but personally it does not work for me.
Submit an example please

Answer the question

In order to leave comments, you need to log in

2 answer(s)
M
Mary Solar, 2017-05-04
@MaryT

This is how it works for me:

@font-face
  font-family: "vera-crouz"
  src: url(../fonts/vera-crouz.ttf)
  src: url(../fonts/vera-crouz.eot)
  src: url(../fonts/vera-crouz.woff)

all font declarations should be one after another, + without commas
was also a problem, I asked this question here:
Tyts

M
Maxim, 2018-07-12
@Amic

@mixin font-face($font-family, $file-path, $weight: normal, $style: normal, $asset-pipeline: false )
  @font-face
    font-family: $font-family
    font-weight: $weight
    font-style: $style

    @if $asset-pipeline == true 
      src: font-url('#{$file-path}.eot')
      src: font-url('#{$file-path}.eot?#iefix') format('embedded-opentype'), font-url('#{$file-path}.woff') format('woff'), font-url('#{$file-path}.ttf') format('truetype')
    @else
      src: url('#{$file-path}.eot')
      src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'), url('#{$file-path}.woff') format('woff'), url('#{$file-path}.ttf') format('truetype')

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question