CODEWITHSUNDEEP
csssassfont-facegoogle-font-api
Albert Font
Albert Font

Reputation: 606

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

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?

Upvotes: 20

Views: 29105

Answers (4)

Federico Moretti
Federico Moretti

Reputation: 584

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.

Upvotes: 1

Hany Afifi
Hany Afifi

Reputation: 77

The correct syntax for importing Google Fonts into Sass:

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

Upvotes: 4

Arin Yazilim
Arin Yazilim

Reputation: 1117

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

Upvotes: 1

heyitsjhu
heyitsjhu

Reputation: 981

Instead of using url(), try the below:

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

Upvotes: 27

Related Questions