font is not importing on sass-CodePudding

I'm trying to import a google font using @font-face on sass but it's not working and I can't figure out why, can anyone tell me what's wrong?

@font-face{
font-family: 'Space Grotesk';
src: url(fonts.google.com/specimen/Space Grotesk);
font-weight: 500;
} 

* {
    margin: 0;
    padding: 0;

}
body{
font-family: 'Space Grotesk';

<body>
  <div >
    <div >
    <div >
  <h3>0000 0000 0000 0000</h3>
  <h4>Jane Appleseed</h4>
  <h4>00/00</h4>
</div>
<div >
  000
</div>
</div>

CodePudding user response：

You need to import the URL and should then set the font as a variable that can be used later IE:

@import url(http://fonts.google.com/specimen/Space Grotesk);

// Variable
$space-grotesk: 'Space Grotesk', serif;  

body {
    font-family: $space-grotesk;
}

This is the reasoning for using SASS -- Making it easier to use variables that are only set one time IE

@import url(http://fonts.google.com/specimen/Space Grotesk);
@import url(http://fonts.google.com/specimen/Some Font);
@import url(http://fonts.google.com/specimen/Foo Bar);

// Variable
$space-grotesk: 'Space Grotesk', serif;  
$button-font: 'Other Font', sans-serif;  
$list-font: 'Foo Bar', serif;  

body {
    font-family: $space-grotesk;
}

button {
    font-family: $button-font;
}

li {
    font-family: $list-font;
}

CodePudding user response：

you need to specify the styles you want and import them

@import url('https://fonts.googleapis.com/css2?family=Space Grotesk:wght@400;600&display=swap');

Usage

font-family: 'Space Grotesk', sans-serif;

Or in variables

$base-font: 'Space Grotesk', sans-serif

// use anywhere
body {
   font-family: $base-font;
}