Load different font for different languages in SCSS - css

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.