search

os-js / osjs-client

OS.js Client Module
https://manual.os-js.org/
Other
31 stars 31 forks source link

Add a persian font #155

Closed mahsashadi closed 3 years ago

mahsashadi commented 3 years ago

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?

andersevenrud commented 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.

andersevenrud commented 3 years ago

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;
}
mahsashadi commented 3 years ago

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;
 }
andersevenrud commented 3 years ago

The index scss file is correct. What does devtools say about this?

mahsashadi commented 3 years ago

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]'
          }
        }
      },
andersevenrud commented 3 years ago

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 ?

mahsashadi commented 3 years ago

Devtools actually tried loading it, right ?

Right

? There wasn't like a 404 error or something ?

No, just the mentioned warnings

andersevenrud commented 3 years ago

Maybe you could share this font so I can test mysefl ?

mahsashadi commented 3 years ago

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:

Screenshot from 2021-04-21 16-34-28

andersevenrud commented 3 years ago

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 ?

mahsashadi commented 3 years ago

Do you see the files when you run webpack ?

Yes as below:

Screenshot from 2021-04-24 16-21-49

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!

andersevenrud commented 3 years ago

Send me an archive with these fonts so I can try to reproduce this :)

mahsashadi commented 3 years ago

here is the folder I add in src/client fonts.zip

andersevenrud commented 3 years ago

Here's what I did:

  1. Extracted fonts into src/client/typeface (you don't have to modify webpack config)
  2. Added CSS typeface rules
  3. Added !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.

andersevenrud commented 3 years ago

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.

andersevenrud commented 3 years ago

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:

mahsashadi commented 3 years ago

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 ?

mahsashadi commented 3 years ago

It has warnings: Failed to decode downloaded font and OTS 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.

andersevenrud commented 3 years ago

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 ?