Search code examples
sass

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


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?


Solution

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