'Invalid CSS' error when loading external font into SASS

Question

I'm getting an error when trying to load an external font in my SASS file. Here is the code to load the font-face from all.sass (which is in the same directory as leaguespartan-bold-webfont.woff and leaguespartan-bold-webfont.woff2):

@font-face {
    font-family: 'league_spartanbold';
    src: url('leaguespartan-bold-webfont.woff2') format('woff2'),
         url('leaguespartan-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

And the error message when I try to run this locally:

@font-face {
           ^
      Invalid CSS after "@font-face {": expected "}", was "{"

What is the extension of the file? Is it `.sass` or `.scss`? — Praneet Dixit, Nov 27 '20 at 05:03
Can you check compiling the same code with `.scss` extension? — Praneet Dixit, Nov 27 '20 at 05:09

score 0 · Answer 1 · answered Nov 27 '20 at 04:38

You probably want the file extension .scss, which is for the CSS-like syntax for Sass.

See also: https://stackoverflow.com/a/5654471/864799

Otherwise, you need to switch the font-face declaration to use the whitespace significant .sass syntax, which doesn’t include braces.

'Invalid CSS' error when loading external font into SASS

1 Answers1