[feature]: Ability to use local fonts for Arabic

snnsnn commented 2 years ago

Is there an existing issue for this feature?

[X] There is no exsiting issue for this feature

Summary

Add a setting to let the user to overwrite the current Arabic font with a locally installed one.

Your purposed solution for this feature

Add a custom option under Fonts setting, upon selection an input box may appear, whatever the user puts overwrites the existing Arabic font by prepending it:

font-family: "...custom one...", "_PDMS_Saleem_QuranFont", "Traditional Arabic";

If user adds a name which does not correspond to valid font, it will not effect the output since browser will ignore it.

hazem3500 commented 1 year ago

Hmmmm 🤔 I wonder if that's actually a good idea 😅

A custom font might break the UI a bit if it makes the letters wide and overflow the text 🤷 Also, is this really needed? 🤔 Aren't the available fonts good enough?

snnsnn commented 1 year ago

There are not many fonts, only four since tajweed is image. KF Complex V1 is very thick as if it is stroked. Having easy to read fonts could be very helpful for non-arab readers. There are some suberb Arabic fonts, clear and easy to read but unfortunately they are proprietary and no way to put them online. This could be a good workaround.

Normally you don't expect using different fonts breaking the UI but current implementation applies font faces as style attributes directly to the element, like sostyle="font-family: p2-v1;", so definitely requires some tweaking. Using style attributes makes it almost impossible to overwrite fonts via methods like Stylus.

If current implementation requires too many changes, you can take note of it and implement later when you have re-write. It is something to consider anyway.

quran / quran.com-frontend-next