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.

    Change a font issue

    Scheduled Pinned Locked Moved Custom CSS
    5 Posts 2 Posters 1.3k Views 1 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.
    • A Offline
      artomka Project Sponsor
      last edited by

      Hi guys,

      I would like to inquire you to help me with changing a newsfeed font.
      I`ve already done this modification of custom.css:

      @font-face {
        font-family: FivoSans;
        font-style: normal;
        font-weight: medium;
        src:
          local("Fivo"),
          url("Fivo/FivoSans-Medium.woff2") format("woff2"),
          url("Fivo/FivoSans-Medium.woff") format("woff");
      }
      .fivosans-custom-class {
        font-family: 'FivoSans';
        font-weight: medium;
      }
      
      .fivosans-medium-custom-class {
        font-family: 'FivoSans';
        font-weight: medium;
      }
      .newsfeed {
        font-family: FivoSans;
      }
      
      body {
      }  
      
      

      The font was converted from TrueType to Woff and Woff2 a I have copied it into this folder:

      /home/pi/MagicMirror/fonts/node_modules/roboto-fontface/fonts/Fivo
      

      I am a Newbie in CSS, so if you have any idea what I do wrong, give me an advice, please.

      brobergB 1 Reply Last reply Reply Quote 0
      • brobergB Offline
        broberg Project Sponsor @artomka
        last edited by

        @artomka

        The folderpath isn’t correct.

        This is the easiest way to test your font :

        Copy the font FivoSans-Medium.woff directly in to your css folder.
        then change the url to url("FivoSans-Medium.woff") format("woff");

        1 Reply Last reply Reply Quote 0
        • A Offline
          artomka Project Sponsor
          last edited by

          Hi, thank you for your time. However, it hasn’t helped. Maybe there is another problem in my CSS file?

          brobergB 1 Reply Last reply Reply Quote 0
          • brobergB Offline
            broberg Project Sponsor @artomka
            last edited by broberg

            @artomka

            Try (removing the font weight from the font face)

            
            @font-face {
              font-family: FivoSans;
              font-style: normal;
              src:
                local("Fivo"),
                url("FivoSans-Medium.woff2") format("woff2");
            }
            
            .newsfeed .light {
              font-family: FivoSans;
            }
            

            (notice that i added the .light class after .newsfeed, this is because the .light class name adds the robot font and overwrites the more general font added to .newsfeed)
            With the font file still in the css folder (no subfolders ofc)., Next step is to try any other font type, like otf or ttf

            1 Reply Last reply Reply Quote 0
            • A Offline
              artomka Project Sponsor
              last edited by

              Thank you for your advice. However, only this code has solved the issue:

              
              @font-face {
                font-family: FivoSans;
                font-style: normal;
                src:
                  url("FivoSans-Medium.woff2") format("woff2"),
                  url("FivoSans-Medium.woff") format("woff");
              }
              .fivosans-custom-class {
                font-family: 'FivoSans';
                font-weight: medium;
              }
              
              .fivosans-medium-custom-class {
                font-family: 'FivoSans';
                font-weight: medium;
              }
              .newsfeed .medium {
                font-family: FivoSans;
              }
              
              

              I had to add .medium, and now it works 😊👍 Thank you very much!

              1 Reply Last reply Reply Quote 1
              • 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