Different fonts based on language #18546

adriankwiat · 2025-07-15T21:25:25Z

adriankwiat
Jul 15, 2025

I have multilingual website, where main lanugage is English and it has elements in Japanese. I want to use different fonts, depending on lanugage, and I want to easily switch between variants.

Here is simple example what I mean:

<html lang="en">
    <body>
        <p>
            This should use 'Roboto' font (because font-sans is default).
        </p>
        <p lang="ja">
            This should use 'Noto Sans CJK JP' font
            (because font-sans is default and this paragraph is in japanese).
        <p>
        <div class="font-serif">
            <p>This should use 'serif' font.</p>
            <p lang="ja">This should use 'Noto Serif CJK JP' font.</p>
        </div>
        <p lang="ja" class="font-serif">
            This also should use 'Noto Serif CJK JP' font.
            <span lang="en">
                I don't plan to have English fragments inside Japanese text,
                so this doesn't have to use 'serif', even though it's in English.
            </span>
        </p>
        <div lang="ja">
            <p lang="en">This also doesn't have to use 'Roboto'.</p>
        </div>
    </body>
</html>

What would be the best way to achieve that behavior with Tailwind?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Different fonts based on language #18546

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Uh oh!

Different fonts based on language #18546

Uh oh!

adriankwiat Jul 15, 2025

Replies: 0 comments

adriankwiat
Jul 15, 2025