How to include a font so that sass does not swear?

Question

Fonts

When connecting the font in this way, it does not work:

@font-face
  font-family: 'Roboto'
  font-weight: 400
  font-style: normal
  font-stretch: normal
  src: url('../fonts/roboto-400/roboto-400.eot')
  src: url('../fonts/roboto-400/roboto-400.eot#iefix') format('embedded-opentype')
  src: url('../fonts/roboto-400/roboto-400.woff') format('woff')
  src: url('../fonts/roboto-400/roboto-400.woff2') format('woff2')
  src: url('../fonts/roboto-400/roboto-400.ttf') format('truetype')
  src: url('../fonts/roboto-400/roboto-400.svg#roboto-400') format('svg')

When connecting the font this way, it works:

@font-face
  font-family: 'Roboto'
  font-weight: 400
  font-style: normal
  font-stretch: normal
  src: url('../fonts/roboto-400/roboto-400.eot')
  src: url('../fonts/roboto-400/roboto-400.eot#iefix') format('embedded-opentype'),
       url('../fonts/roboto-400/roboto-400.woff') format('woff'),
       url('../fonts/roboto-400/roboto-400.woff2') format('woff2'),
       url('../fonts/roboto-400/roboto-400.ttf') format('truetype'),
       url('../fonts/roboto-400/roboto-400.svg#roboto-400') format('svg')

In both cases, sass is used and when compiling the file with the second option for connecting the font, an error is generated that says that there must be ":" before the url.
How to solve the problem?

Answer 1

Mixin for scss https://gist.github.com/jonathantneal/d0460e5c2d5d...
If you write specifically in sass, there should not be a line break, all in one

Answer 2

Try this in this case: src: url('../fonts/roboto-400/roboto-400.eot#iefix') format('embedded-opentype'), url('../fonts/roboto-400/ roboto-400.woff') format('woff'), url('../fonts/roboto-400/roboto-400.woff2') format('woff2'), url('../fonts/roboto- 400/roboto-400.ttf') format('truetype'),url('../fonts/roboto-400/roboto-400.svg#roboto-400') format('svg')
all one line.
Or connect bourbon https://www.bourbon.io/docs/5.1.0/#font-face

Answer 3

I am using mixin for example...

@include font-face('Circe', '/template/fonts/Circe-Regular', normal, normal, woff2 woff ttf eot svg);
@include font-face('Circe', '/template/fonts/Circe-Light', 300, normal, woff2 woff ttf eot svg);
@include font-face('Circe', '/template/fonts/Circe-ExtraLight', 200, normal, woff2 woff ttf eot svg);
@include font-face('Circe', '/template/fonts/Circe-Thin', 100, normal, woff2 woff ttf eot svg);

@function str-replace($string, $search, $replace: "") {
  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }

  @return $string;
}

@mixin font-face($name, $path, $weight: null, $style: null, $exts: eot woff2 woff ttf svg) {
  $src: null;

  $extmods: (
    eot: "?",
    svg: "#" + str-replace($name, " ", "_")
  );

  $formats: (
    otf: "opentype",
    ttf: "truetype"
  );

  @each $ext in $exts {
    $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext);
    $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
    $src: append($src, url(quote($path + "." + $extmod)) format(quote($format)), comma);
  }

  @font-face {
    font-family: quote($name);
    font-weight: $weight;
    font-style: $style;

    // font-display: block;
    src: $src;
  }
}

Answer 4

I got it without errors like this:

@font-face
  font-family: 'Myriad Pro Regular'
  src: url('../fonts/MyriadPro-Regular.eot')
  src: url('../fonts/MyriadPro-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/MyriadPro-Regular.woff') format('woff'), url('../fonts/MyriadPro-Regular.ttf') format('truetype')
  font-weight: normal
  font-style: normal