Jquery Switch Arabic fonts

Question

I want to display Arabic on my site.... quite straight forward so far :)

What i would like Jquery to do is to have a button/image which, when clicked, will toggle the css file and switch between 2 different Arabic fonts ie. simple arabic & uthmani arabic fonts.

does anyone know how this can be done?

regards

Answer 1

Instead of toggling the CSS file itself, you can associate each font with a CSS class and toggle that class. For instance:

.simple {
    font-family: simplified arabic;
}

.uthmani {
    font-family: uthmantn;
}

If you start in simplified arabic mode:

<div class="simple">
    العربية
</div>

You can remove the simple class and add the uthmani class in a single call to toggleClass():

$("div").toggleClass("simple uthmani");

You can see the results in this fiddle.