SCSS: How can import a Google Font inside a SCSS file?

Question

I'm trying to import a Google Font inside the main.scss file, but following code didn't work:

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

Is there a way to do that? I looking for this question in stackoverflow, but I don't find a concrete answer...

Can somebody help me?

Quartzite

Answer 1

Instead of using url(), try the below:

@import 'https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700';

Tilla

Answer 2

The correct syntax for importing Google Fonts into Sass:

@import url('https://fonts.googleapis.com/css2?family=Alegreya + Sans + SC:wght@400;500;800');

Courageous

Answer 3

Another example from my case, for multiple import:

CSS: @import url('https://fonts.googleapis.com/css?family=Raleway:100,300,400|Roboto+Condensed:300,700&display=swap');

SCSS: @import 'https://fonts.googleapis.com/css?family=Raleway:100,300,400|Roboto+Condensed:300,700&display=swap';

Jase

Answer 4

Right know, using Gulp and Dart Sass, both work. I prefer the Sass-way, just saying. So, with the new Google Fonts’ syntax:

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap");

or

@import "https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap";

give the same, exact result compiled from Sass to CSS. Then, if you add one of these in a .scss file, you don’t have to worry at all.

Shanan