Separate custom fonts for English and non-English (UTF-8) lines

[Farrukh]

Is there any way to define fonts separately for English and non-English characters?

I am using Urdu/Arabic characters along with English words in one note. I’ve defined a separate class for it, which is setting the Urdu font correctly, but it also applies to English words. But I want fonts for English words, like Calibri font. Here is my css and using it with property cssclasses: urdu_para

.urdu_para {
    --file-line-width: 1000px; 
    font-family: 'Jameel Noori Nastaleeq'; 
    direction: rtl;    
    font-size:20px; 
    
    word-spacing: 3px;

    margin-top: 2px;
    margin-bottom: 20px;
    margin-right: 20px;
    margin-left: 20px;
}

And here is the preview.

w, using the property cssclasses would disable the css rendering in **Live Preview Mode.

[ariehen]

What if you try adding the font you want to use for English before the Jameel-Noori-Nastaleeq font? Does that work for you? e.g.

font-family: 'Calibri', 'Jameel Noori Nastaleeq';

In my vault:

Note: the CSS as written isn’t changing the fonts in the editor; it’s only affecting Reading view.

// moved to custom CSS

[Farrukh]

Thanks for the reply.
I had already tried font-family: 'Calibri', 'Jameel Noori Nastaleeq';. This would simply set the Calibri font on top. As far I have observed, the first font in font-family takes the priority. If fist font is not available, then the next font come into use.
Here is the preview after using font-family: 'Calibri', 'Jameel Noori Nastaleeq';:

Reading and Live Preview Modes.

Yes, I’m aware that this CSS won’t change fonts in editor as cssclass is not supported in Live Preview. The work around for this is to split your document and set one on Reading View and keep editing in the other view.

I know, I can use HTML like <span> or <article> etc and it would work in Live Preview Mode: Here is an example of such para using

<article class='urdu_para'>

See the English lines which are taking Jameel Noori Nastaleeq as well. If I use font-family: 'Calibri', 'Jameel Noori Nastaleeq';, the whole would start using Calibri and Jameel Noori Nastaleeq would only be used if Calibri is not available.

The problem in using HTML like that, you can’t use Markedown in HTML area. For instance, to make a heading you can’t use # or ### or to mark your lines, you can’t use ==Marked Lines==. You must use HTML tags here like h1, h2 or <mark>Marked Lines </mark> which is bit difficult to type as compared to MD tags.

[ariehen]

@Farrukh

I’m aware that this CSS won’t change fonts in editor as cssclass is not supported in Live Preview.

It is. The CSS just needs to be written differently.

/* editor font */
.markdown-source-view.mod-cm6.urdu_para .cm-scroller {
    font-family: 'MonaSpace Argon', 'Jameel-Noori-Nastaleeq'; }

/* reading view font */
.markdown-preview-view.urdu_para {
    font-family: 'MonaSpace Argon', 'Jameel-Noori-Nastaleeq'; }

I think the few fonts I tried don’t have Urdu script so are being used for the English and Jameel Noori Nastaleeq for the Urdu.

I’ll have a look again tomorrow.

[Farrukh]

Thanks for this CSS This worked with Live Preview, Source and Reading mode

/* editor font */
.markdown-source-view.mod-cm6.urdu_para .cm-scroller {
    font-family: 'Jameel-Noori-Nastaleeq',  'Calibri'; }

/* reading view font */
.markdown-preview-view.urdu_para {
        font-family: 'Jameel-Noori-Nastaleeq',  'Calibri';  }

However, the fonts are still rendering in the sequence defined in font-family i.e. first Jameel Noori Nastaleeq and then Calibri and Calibri would be effective only if Jameel Noori Nastaleeq is not available. As a test, let’s set Calibri before Jameel Noori Nastaleeq:

/* editor font */
.markdown-source-view.mod-cm6.urdu_para .cm-scroller {
    font-family: 'Calibri', 'Jameel-Noori-Nastaleeq'; }

/* reading view font */
.markdown-preview-view.urdu_para {
        font-family: 'Calibri', 'Jameel-Noori-Nastaleeq';  }

And here is the result from Reading Mode:

i.e. Calibri has taken over.

[ariehen]

I installed Calibri on my mac to make sure we were using the same fonts. This version seems working on my end. Tried it on Windows as well; almost the same but the Jameel font name in src: doesn’t have the dashes. Give it a try:

macOS:

@font-face {
    font-family: 'Jameel';
    src: local('Jameel-Noori-Nastaleeq');
    unicode-range: U+0600-06FF; }

/* editor font - source mode and live preview */
.markdown-source-view.mod-cm6.urdu_para .cm-editor .cm-scroller {
    font-family: 'Jameel', 'Calibri'; }

/* reading view font */
.markdown-preview-view.urdu_para {
    font-family: 'Jameel', 'Calibri'; }

Windows:

@font-face {
    font-family: 'Jameel';
    src: local('Jameel Noori Nastaleeq');
    unicode-range: U+0600-06FF; }

/* editor font - source and live preview */
.markdown-source-view.mod-cm6.urdu_para .cm-editor .cm-scroller {
  font-family: 'Jameel', 'Calibri'; }

/* reading view font */
.markdown-preview-view.urdu_para {
  font-family: 'Jameel', 'Calibri'; }

[Farrukh]

@ariehen

: 'Jameel', 'Calibri';

Ahh… It worked.
You hit the unicode-range: U+0600-06FF, while, I was trying to hit the unicode-range: U+000-5FF; /* Latin glyphs */, with Calibri so that rest of the unicde-range would get the Jameel, but that didn’t worked.

This is now working awesomely…
Thanks a bunch for all the help … Really appreciated