Closed mahsashadi closed 3 years ago
In order to be able to switch font based on context, the locale would have to be added to the <html>
element. I thought this was already done, but I'll look at this now.
The root element (body by default) now contains data-locale
that you can use to determine what font to use. Add your font faces as normal, then ex:
.osjs-root[data-locale="foo_BAR"] {
font-face: your-font-face;
}
where should I add this code?
I add the following code in src/client/index.scss
, but it did not work.
@font-face {
font-family: Vazir;
font-style: normal;
font-weight: normal;
src: url('./fonts/Vazir.eot');
src: url('./fonts/Vazir.eot?#iefix') format('embedded-opentype'),
url('./fonts/Vazir.woff2') format('woff2'),
url('./fonts/Vazir.woff') format('woff'),
url('./fonts/Vazir.ttf') format('truetype');
}
@font-face {
font-family: Vazir;
font-style: normal;
font-weight: bold;
src: url('./fonts/Vazir-Bold.eot');
src: url('./fonts/Vazir-Bold.eot?#iefix') format('embedded-opentype'),
url('./fonts/Vazir-Bold.woff2') format('woff2'),
url('./fonts/Vazir-Bold.woff') format('woff'),
url('./fonts/Vazir-Bold.ttf') format('truetype');
}
.osjs-root[data-locale="fa_FA"] {
font-family: Vazir;
}
The index scss file is correct. What does devtools say about this?
It has warnings: Failed to decode downloaded font
and OTS parsing error: invalid version tag
The same fonts are working well inside a OSjs application.
Can it be about loader? I changed the webpack.config
file as below:
{
// test: /\.(svg|png|jpe?g|gif|webp)$/,
test: /\.(svg|png|jpe?g|gif|webp|woff|woff2|eot|ttf)(\?.*$|$)/,
use: [
{
loader: 'file-loader'
}
]
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
include: /typeface/,
use: {
loader: 'file-loader',
options: {
name: 'fonts/[name].[ext]'
}
}
},
The file-loaders just decides what path they end up with. Does not change the file in any way. Devtools actually tried loading it, right ? There wasn't like a 404 error or something ?
Devtools actually tried loading it, right ?
Right
? There wasn't like a 404 error or something ?
No, just the mentioned warnings
Maybe you could share this font so I can test mysefl ?
Thanks, I have tested other fonts, the problem is not about that.
Sorry! the devtools shows that it does not try to load my font, some other names are shown in warnings:
The only thing I can think of is that either the font is corrupt, or that they're not properly included. Do you see the files when you run webpack ?
Also, what's the contents of your Network tab in devtools ?
Do you see the files when you run webpack ?
Yes as below:
some other names are shown in warnings:
Actually those warning will be disapeared when I comment @import "~typeface-roboto/index.css";
line
what's the contents of your Network tab in devtools ?
Nothing!
Send me an archive with these fonts so I can try to reproduce this :)
here is the folder I add in src/client
fonts.zip
Here's what I did:
src/client/typeface
(you don't have to modify webpack config)!important
to font-family
rule@font-face {
font-family: Vazir;
font-style: normal;
font-weight: normal;
src: url('./typeface/Vazir.eot');
src: url('./typeface/Vazir.eot?#iefix') format('embedded-opentype'),
url('./typeface/Vazir.woff2') format('woff2'),
url('./typeface/Vazir.woff') format('woff'),
url('./typeface/Vazir.ttf') format('truetype');
}
@font-face {
font-family: Vazir;
font-style: normal;
font-weight: bold;
src: url('./typeface/Vazir-Bold.eot');
src: url('./typeface/Vazir-Bold.eot?#iefix') format('embedded-opentype'),
url('./typeface/Vazir-Bold.woff2') format('woff2'),
url('./typeface/Vazir-Bold.woff') format('woff'),
url('./typeface/Vazir-Bold.ttf') format('truetype');
}
.osjs-root[data-locale="fa_FA"] {
font-family: Vazir !important;
}
The reason it probably did not work for you is that the font-family is actually set in the javascript code via configuration. Because of this you have to add !important
because of how CSS specificity works.
Please not that the vertical alignment of this font seems a little bit off, so certain UI elements might not look like they do with Roboto.
The reason it probably did not work for you is that the font-family is actually set in the javascript code via configuration
Now that I've said this, I think I might add a way to do this in JavaScript :thinking:
Thank a lot, now my persian font works.
Please not that the vertical alignment of this font seems a little bit off, so certain UI elements might not look like they do with Roboto.
You are right, It happened for some of my applications. You mean I should totally change this font ?
It has warnings:
Failed to decode downloaded font
andOTS parsing error: invalid version tag
Although It works, I still have those warnings!
Moreover, while the locale is set for persian, sometimes english words with no translation are shown with a font other than Roboto.
Although It works, I still have those warnings!
Moreover, while the locale is set for persian, sometimes english words with no translation are shown with a font other than Roboto.
Can you show me this ?
You mean I should totally change this font ?
That's up to you I guess. There's no support for this in the Roboto font ?
Hi.
By setting the persian language in setting app, I want the whole desktop use a specefic persian font.
I put the fonts in a folder in src/client path and I add @font-face rules in src/client/index.scss. Am I correct? What else should I do?