I have a vue application that is multi-language (which for that I used i18n) and I need to handle the font-family for each language in different css file.
I had an idea that I can import css files conditionally but I don't know how.
Does anybody else have any idea or solution for my problem?
There are two different css file like this and each render different font from other:
@font-face {
font-family: "Questrial";
src: url("../../fonts/Questrial-Regular.ttf");
}
@font-face {
font-family: "Galano_Grotesque_extra_Bold";
src: url("../../fonts/Galano_Grotesque_Bold.otf");
}
@font-face {
font-family: "Galano_Grotesque_Bold";
src: url("../../fonts/Galano_Grotesque_DEMO_Bold.otf");
}If I want to say that in other word, my application has "English" and "Persian" language. When app locale is English I need to render en-css.css file and when the locale is Persian I need to render fa-css.css file.
I would be glad to hear about your ideas :)
You could use your html-tags lang attribute to overwrite the used font-family on your html tag according to your applications language.
@font-face {
font-family: "Questrial";
src: url("../../fonts/Questrial-Regular.ttf");
}
@font-face {
font-family: "Galano_Grotesque_extra_Bold";
src: url("../../fonts/Galano_Grotesque_Bold.otf");
}
@font-face {
font-family: "Galano_Grotesque_Bold";
src: url("../../fonts/Galano_Grotesque_DEMO_Bold.otf");
}
/* english font default */
html {
font-family: "Questrial";
}
/* other font for persian */
html[lang="fa"] {
font-family: "Galano_Grotesque_Bold";
}Given that you can't change the lang attribute, you can use unicode-range in font definitions. For Languages using the basic Latin alphabet:
@font-face {
font-family: "Questrial";
src: url("../../fonts/Questrial-Regular.ttf");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
And for Persian (using Vazir as a sample Persian font),
@font-face {
font-family: "Vazir";
src: url("../../fonts/vazir.ttf");
unicode-range: U+0660-0669, U+06F0-06F9;
}
The above Unicode ranges might need adjustments depending on your application requirements.