Is it possible to import fonts from the directory with scss?

Question

I have a scss file with font import implemented this way:

@import url(https://fonts.googleapis.com/css?family=PT+Sans+Caption:400,700&subset=latin-ext,cyrillic); 

I understand that using CDN gives advantages in caching for user but this is internal site and it could be used on server without access to the wide web. And I'm not sure that user machine will have access to the Internet too. So I want to serve fronts with other pages static files.

Is there a way in SCSS to import fonts from the some directory on server? Something like:

@import dir(/path/to/fonts/file)

Or SCSS has not this feature?

Toting

add @font-face directly to the sass file – Millerite

Answer 1

As far as I know you can't import fonts using @import in SCSS. You can include fonts using @font-face. For example:

@font-face {
    font-family: 'Open Sans';
    src: url(path/to/file) format(Example: 'truetype' or 'opentype' depending on the file extension of your font);
}


// USAGE
body {
    font-family: 'Open Sans', sans-serif;
}

Prognosticate

This is what the @import from google fonts does. If you put the import url into your browser this is what you see (a bunch of @font-face's). – Titograd

Works great. It is now also recommended to add font-display: swap; in the @font-face rule. Gives you some extra Google points ;) See developer.mozilla.org/en-US/docs/Web/CSS/@font-face/… – Nahama

How can I get multiple boldness sizes? – Retroversion

Answer 2

it's a bit late but you can use the following format with libsass for external imports

@import url("http...");

Conversion

I don't think the url should have any quotes around it – Triliteral

is there corresponding @use usage? @use url("http..."); and @use "http..."; don't seem to work – Omnipotence

Answer 3

Usually it's used to import CSS fragments or files and not fonts. Try this workaround if you are using Ruby SASS/SCSS and try without brackets.

@import "https://fonts.googleapis.com/css?family=PT+Sans+Caption:400,700&subset=latin-ext,cyrillic.css"; 

I put a .css behind it. Works for me with Ruby SASS/SCSS but not with LibSass though.

Soudan

Answer 4

import { SPComponentLoader } from '@microsoft/sp-loader';

In the constructor of your web part you can load it using the SPComponentLoader

export default class WebPart extends BaseClientSideWebPart<WebPartProps> {
    constructor() {
      super();
    
      SPComponentLoader.loadCss('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
      
    }

}

Hamamatsu

Answer 5

If you are in angular you can add a dependency on the package.json

"@fontsource/nunito-sans": "^4.5.1",
"@fontsource/roboto": "^4.5.7",

Then you can add this on the scss file as import.

@import "@fontsource/nunito-sans";
@import "@fontsource/roboto";

And then use then on the styles

$fontFamily: "Nunito Sans", "Roboto", "Helvetica Neue", sans-serif;

Onida

Answer 6

Try this

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

use font-family like

font-family: 'PT Sans Caption', sans-serif;

Menke

Answer 7

Link to an external resource:

@font-face {
  src: url('https://fonts.googleapis.com/your-font')
  ...
}

Link to a relative file (did not work for me):

@font-face {
  src: url('../../assets/fonts/your-font-name.woff2')
  ...
}

I had an issue when using relative path which appears to be a SCSS Issue

So I used the absolute path and it worked:

@font-face {
  src: url('/root-dir/assets/fonts/your-font-name.woff2')
  ...
}

Cimmerian