• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
MagicMirror Forum
  • Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.

Font for non-latin characters

Scheduled Pinned Locked Moved Solved Custom CSS
6 Posts 3 Posters 683 Views 3 Watching
Loading More Posts
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • M Offline
    MMRIZE @jv2007
    last edited by May 14, 2024, 8:28 PM

    @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.

    1 Reply Last reply Reply Quote 0
    • M Offline
      MMRIZE @jv2007
      last edited by MMRIZE May 14, 2024, 9:31 PM May 14, 2024, 9:00 PM

      @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.

      5dad8c9d-2cf0-4c04-a3e7-542682a1f0d8-image.png

      1 Reply Last reply Reply Quote 1
      • K Online
        karsten13 @jv2007
        last edited by May 14, 2024, 9:02 PM

        @jv2007

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

        1 Reply Last reply Reply Quote 0
        • M Offline
          MMRIZE @jv2007
          last edited by MMRIZE May 14, 2024, 9:30 PM May 14, 2024, 9:26 PM

          @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';
          }
          

          9e04b138-2e5b-4a9b-9dcc-d087d1b2988f-image.png

          1 Reply Last reply Reply Quote 0
          • J Offline
            jv2007
            last edited by May 22, 2024, 7:07 PM

            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!

            1 Reply Last reply Reply Quote 0
            • J jv2007 marked this topic as a question on May 22, 2024, 7:08 PM
            • J jv2007 has marked this topic as solved on May 22, 2024, 7:08 PM
            • 1 / 1
            • First post
              Last post
            Enjoying MagicMirror? Please consider a donation!
            MagicMirror created by Michael Teeuw.
            Forum managed by Sam, technical setup by Karsten.
            This forum is using NodeBB as its core | Contributors
            Contact | Privacy Policy