Correct way of Enqueue self hosted fonts in sass project

Question

Trying my hand on building a theme with sass, having a bit of a problem with figuring out how to use my self hosted font in the project. This is probably dirt simple, and as usual I'm overcomplicating things in my mind.

When using google fonts i enqueue them from functions.php and reference the enqueued font in my stylesheets, but with a self hosted font the suggestion i find is that i should import them through @import into my stylesheet.

If i have a fonts folder in the root of my theme, containing my font, using the basic structure of a sass generated underscores theme, what is the most efficient way of incorporating that font into my theme?

Answer 1

I think the better way would be declaring a file named _fontface.scss and put the below code blocks there -

@mixin fontFace($family,$src,$style: normal,$weight: normal) {
    @font-face {
        font-family: $family;
        src: url('#{$src}.eot'); // IE9 compat
        src: url('#{$src}.eot?#iefix') format('embedded-opentype'), // IE8 and below
            url('#{$src}.woff') format('woff'), // standards
            url('#{$src}.ttf') format('truetype'), // Safari, Android, iOS
            url('#{$src}.svg##{$family}') format('svg'); // legacy iOS

        font-style: $style;
        font-weight: $weight;
    }
}

Now you include that _fontface.scss to main bootstrap file and use it like-

@import 'fontface';
@include fontFace('YourFont','font/yourfont');

Hope that helps.