Load different font for different languages in SCSS

Question

How do i utilize SCSS feature to load different font based on different language by using &:lang() in css? I am planning to use it this way at top scss file chain. Do you think this is correct?

//Default font-family it's not Japan language
    @font-face {
        font-family: "xxx";
        font-style: normal;
        font-weight: normal;
        src: url('xxx.eot');
        src: local(xxx), 
        url("xxx.eot?#iefix") format("embedded-opentype"), 
        url("xxx.woff") format("woff"), 
        url("xxx.ttf") format("truetype"), 
        url("xxx.otf") format("opentype"), 
        url("xxx.svg#xxx") format("svg");
    }

//If Japanese then
html:lang(ja) {
    @font-face {
        font-family: "Meiryo";
        font-style: normal;
        font-weight: normal;
        src: url('Meiryo.eot');
        src: local(Meiryo), 
        url("Meiryo.eot?#iefix") format("embedded-opentype"), 
        url("Meiryo.woff") format("woff"), 
        url("Meiryo.ttf") format("truetype"), 
        url("Meiryo.otf") format("opentype"), 
        url("Meiryo.svg#Meiryo") format("svg");
    }
}

EDIT: the above code prints out like this without any error. This should have been a bug from scss

@font-face {
    html:lang(jp) {
        font-family: "Meiryo";
        ....
    }
}

EDIT: it looks like unicode range is the solution. I'd love to know If you have any better solution. Thanks https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range

Answer 1

//If Japanese then
@font-face {
   .......
   unicode-range: 3000-303f;
}

The unicode-range CSS descriptor sets the specific range of characters to be used from a font defined by @font-face and made available for use on the current page. If the page doesn't use any character in this range, the font is not downloaded; if it uses at least one, the whole font is downloaded.