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?

1 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.