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?

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

Answer 2

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.