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?

score 24 · Accepted Answer · answered Sep 28 '16 at 08:18

24

Instead of using url(), try the below:

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

answered Sep 28 '16 at 08:18

heyitsjhu

score 3 · Answer 2 · answered Jul 25 '20 at 19:11

3

The correct syntax for importing Google Fonts into Sass:

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

answered Jul 25 '20 at 19:11

Hany Afifi

score 0 · Answer 3 · answered May 03 '20 at 13:27

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';

score 0 · Answer 4 · answered Dec 26 '20 at 17:41

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.

4 Answers4