Change a font issue

artomka

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.

broberg

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

artomka

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

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

artomka

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!