MagicMirror² v2.13.0 is available! For more information about this release, check out this topic.

Change a font issue


  • Project Sponsor

    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.


  • Project Sponsor

    @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");


  • Project Sponsor

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


  • Project Sponsor

    @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


  • Project Sponsor

    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!


Log in to reply