11

I've had this issue lately on other developers SASS projects where the Google CDN import won't compile -- See screenshots, saves fine when commented out.

I read a few articles on this issue and it was suggested to do this command:

gem install compass

I don't use compass, I use a SASS plugin for Coda. Guessing the previous developer used Compass to compile? Figured this might help the compiling issue.

enter image description here

enter image description here

Justin Meyers
  • 153
  • 1
  • 1
  • 10

3 Answers3

27

The Sass import code should look like this:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700);

You are importing from an URL, but your code is written as if you were importing a local file—that is why the error message says it can't be found.

Here's a little tutorial on how to use Google fonts with Sass.

thosetinydreams
  • 980
  • 1
  • 13
  • 22
2

We can import separate Sass file in .scss

For example we have two file one in local directory of project and other one in on CDN server/online server (such as google fonts).

local file: css/nameofstylsheet.scss

&

Online Server: http://fonts.googleapis.com/cssfamily=Open+Sans:300italic,400italic,700italic,400,300,700);

we used them as:

@import "css/nameofstylsheet.scss";

@import url(http://fonts.googleapis.com/cssfamily=Open+Sans:300italic,700italic,400,300,700);
Community
  • 1
  • 1
Rizwan
  • 3,741
  • 2
  • 25
  • 22
0

The import code should look like this:

  @import url('https://fonts.googleapis.com/css2?family=Spartan&display=swap');

Or you can link the font file directly in your html with the link tag as:

  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Spartan&display=swap" rel="stylesheet">
Dario Piotrowicz
  • 951
  • 1
  • 6
  • 14
Godfred Gameli
  • 1