Can I set different fonts for Chinese and English separately?

[Youlajiaoma]

When editing Chinese documents, English letters are also used. Is there a way to set my Chinese and English fonts separately?

For example, set the Chinese font to Songti and the English font to Times New Roman.

Your project is very practical. I wish your project gets better and better.

[iamgio]

Thank you for the kind words @Youlajiaoma,

Quarkdown comes with a specific style for Chinese documents (.doclang {Chinese} or zh), based on Noto Serif.

Additionally, you can use .font to set a font. Symbols not covered by the selected font will automatically fall back to the next available font, keeping Chinese text on Noto Serif. For example .font {Impact}.

The issue is that many modern fonts also cover Asian characters. To ensure only Latin unicodes are covered by the font, we need a workaround with direct CSS injection via .css, instead of .font.

Here I'm importing the Karla font from a static file:

.doclang {Chinese}

.css 
    @font-face {
        font-family: 'Karla';
        src: url('Karla/static/Karla-Regular.ttf');
        unicode-range: U+0000-00FF; /* This is important */
    }

    body { --qd-main-font: 'Karla'; } 

This workaround works well. I don't think it's worth it to make it into a built-in feature, in terms of priority. Let me know if it works!

Edit: note that this breaks portability. .font relies on the media storage system to ensure the static files are carried around with the HTML artifact, .css doesn't. This only involves HTML output -- you won't have issues if you intend to generate a PDF.

[Youlajiaoma]

Thank you for your reply, the method you provided is very good, and it perfectly solves my problem.

However, a new problem has arisen. If I set the language to Chinese using .doclang {Chinese}, the .font property can only change the font of English letters and Arabic numerals in the text, and the Chinese font will never change.

For example, I set

.doclang {Chinese}
.font {GoogleFonts:Ma Shan Zheng}

At this point, it will show: English has been set to Ma Shan Zheng, but the Chinese font has not changed.

Note: Ma Shan Zheng is a Chinese font that includes English letters and Arabic numerals.

Thank you again for your reply, wish you all the best and that the project gets better and better.

[iamgio]

@Youlajiaoma I've reopened the issue because this needs to be fixed, thanks for the heads up.
You can use the following as a workaround:

.doclang {Chinese}

.font {GoogleFonts:Ma Shan Zheng}

.cssproperties
    - localized-font: "Ma Shan Zheng"

[Youlajiaoma]

Thank you for your reply. This method, combined with the one you provided last time, has helped me solve the issue of setting different fonts for Chinese and English very well.

Looking forward to a more convenient method for solving this issue in the future, as in Chinese papers, often use Songti (Chinese font) and Times New Roman (English font). If your project can easily set different fonts, it will be very helpful for writing papers.

Once again, thank you for your response, and I wish you all the best, and may your project continue to improve.