4

I'm using the following line in scss:

@import url(https://fonts.googleapis.com/css?family=Montserrat:300,700);

Which gets compiled to css without errors to... exactly the same:

@import url(https://fonts.googleapis.com/css?family=Montserrat:300,700);

But it should get compiled to:

/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;

etc...

I'm using gulp sass to compile my scss, which is based on libsass. It says here that my syntax is correct. Why isn't this working?

Community
  • 1
  • 1
kapoko
  • 938
  • 1
  • 11
  • 29

1 Answers1

4

This is in fact expected behaviour. Quoting the Sass docs:

@import takes a filename to import. By default, it looks for a Sass file to import directly, but there are a few circumstances under which it will compile to a CSS @import rule:

  • If the file’s extension is .css.
  • If the filename begins with http://.
  • If the filename is a url().
  • If the @import has any media queries.

In other words: Sass does not integrate the css from google fonts directly into your css file. Instead, at runtime, the css import directive will resolve the link. Google responds differently depending on your browser by the way.

TheDancingCode
  • 942
  • 5
  • 16
  • Okay! I noticed for example for Android @import in the css doesn't work. Does that mean I'm stuck with loading the google font css separately? – kapoko May 06 '17 at 16:37
  • 1
    It's probably easiest to use the link directive: ``. It's also better for performance, as @import can prevent stylesheets from being downloaded concurrently. You could open the google font link in your browser, and copy the css declarations into your own stylesheet, but as I mentioned, google serves a slightly different response depending on the browser, so I wouldn't advise this. So yes, I would say you're stuck with loading the google font css separately. – TheDancingCode May 06 '17 at 18:37
  • Clear! Thanks. Marked as answered. – kapoko May 06 '17 at 21:45