Font for non-latin characters

[jv2007]

Hi.

I have Open Sans Condensed Thin for my primary font, which is fine for Latin characters. But I don’t like the font for Korean characters in the primary fontset. So want to create a custom.css which should use the primary font for Latin letters but a different font (Noto Sans KR) for Korean.
Both are installed in the /usr/share/font directory of my RPI5.

So I have tried several options of which none were working. Please correct me as I am not familiar with the font-face command.
The 2 last options were suggestions from ChatGPT…

Option 1:

@font-face {
  font-family: 'korean';
  src: local('Noto Sans KR');
  unicode-range: U+110-11FF, U+3130-318F, AC00-FFFD;
}

@font-face {
  font-family: 'korean';
  src: local('Open Sans Condensed Light');
  unicode-range: U+0000-017F;
}  

body {
  font-family: 'korean';
}

Option 2:

/* Define font face for Noto Sans KR */
@font-face {
  font-family: 'Noto Sans KR';
  src: local('Noto Sans KR'), url('path/to/noto-sans-kr.woff2') format('woff2'); /* Adjust the path to your font file */
}

/* Define font face for Open Sans Condensed */
@font-face {
  font-family: 'Open Sans Condensed';
  src: local('Open Sans Condensed'), url('path/to/open-sans-condensed.woff2') format('woff2'); /* Adjust the path to your font file */
}

/* Apply Noto Sans KR to Korean text */
html[lang="ko-KR"] body {
  font-family: 'Noto Sans KR', sans-serif;
}

/* Apply Open Sans Condensed to non-Korean text */
body:not([lang="ko-KR"]) {
  font-family: 'Open Sans Condensed', sans-serif;
}

Option 3:

/* Define font face for Noto Sans KR */
@font-face {
  font-family: 'Noto Sans KR';
  src: local('Noto Sans KR'), url('path/to/noto-sans-kr.woff2') format('woff2'); /* Adjust the path to your font file */
}

/* Define font face for Open Sans Condensed */
@font-face {
  font-family: 'Open Sans Condensed';
  src: local('Open Sans Condensed'), url('path/to/open-sans-condensed.woff2') format('woff2'); /* Adjust the path to your font file */
}

/* Apply Open Sans Condensed by default */
body {
  font-family: 'Open Sans Condensed', sans-serif;
}

/* Apply Noto Sans KR to Korean text within English content */
body:lang(en-GB)::before,
body:lang(en)::before,
body:lang(en-US)::before {
  content: attr(data-korean);
  font-family: 'Noto Sans KR', sans-serif;
}

[MMRIZE]

@jv2007
Option 1 is almost right, but each font-face needs to have a different name.
Option 2 or 3 seems something related to lang attribute. If your content has explicit lang attribute on the element, it might be work, but, as far as I understand, that might not be your thing.

[MMRIZE]

@jv2007
But, more simple way is; just use this;

body {
  font-family: 'Open Sans Condensed', 'Noto Sans KR';
}

Open Sans Condensed font doesn’t have any Korean characters, so when the renderer meet Korean chars, the second fallback Noto Sans KR would be applied instead of Open Sans Condensed.

[karsten13]

@jv2007

you can take a look at <mm-folder>/fonts/roboto.css where the mm fonts are defined

[MMRIZE]

@jv2007
If you want to use @font-face, you can use like this;

@font-face {
  font-family: 'korean';
  src: url('./notosans.ttf') format('truetype');
  unicode-range: U+AC00-FFDD;
}

@font-face {
    font-family: 'english';
    src: url('./opensanscondensed.ttf') format('truetype');
}

div.test {
    font-family: 'korean', 'english';
}

[jv2007]

Thanks @MMRIZE and @karsten13 !

I have tried following your instructions but it didn’t help.
I figured out it’s hidden in the modules css-file. I should have thought about that beforehand.
When I change the font as suggested by @MMRIZE to set as

font-family: 'Open Sans Condensed', 'Noto Sans KR';

It works now.

Thanks guys!
Case closed!