<![CDATA[Change a font issue]]>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.

]]>https://forum.magicmirror.builders/topic/11776/change-a-font-issueRSS for NodeThu, 18 Jun 2026 11:15:27 GMTFri, 13 Dec 2019 14:50:56 GMT60<![CDATA[Reply to Change a font issue on Sat, 14 Dec 2019 22:00:34 GMT]]>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!

]]>https://forum.magicmirror.builders/post/66027https://forum.magicmirror.builders/post/66027Sat, 14 Dec 2019 22:00:34 GMT<![CDATA[Reply to Change a font issue on Sat, 14 Dec 2019 09:23:57 GMT]]>@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

]]>https://forum.magicmirror.builders/post/66004https://forum.magicmirror.builders/post/66004Sat, 14 Dec 2019 09:23:57 GMT<![CDATA[Reply to Change a font issue on Fri, 13 Dec 2019 21:54:55 GMT]]>Hi, thank you for your time. However, it hasn’t helped. Maybe there is another problem in my CSS file?

]]>https://forum.magicmirror.builders/post/65994https://forum.magicmirror.builders/post/65994Fri, 13 Dec 2019 21:54:55 GMT<![CDATA[Reply to Change a font issue on Fri, 13 Dec 2019 20:28:40 GMT]]>@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");

]]>https://forum.magicmirror.builders/post/65987https://forum.magicmirror.builders/post/65987Fri, 13 Dec 2019 20:28:40 GMT