Is it possible to import fonts from the directory

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?

Answer 1

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.

EDIT: I guess it's no more working according to the downvotes and no reason like always. This post was made far back in 2016, what did you expect.

Answer 2

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

Answer 3

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

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