Sonarqube incorrectly reports "Unexpected missing generic font family "Roboto" and "Poppins""

[Appstek (Design)]

Sonar Qube is showing this bug “Unexpected missing generic font family” even though this “Roboto” and “Poppins” generic font family is included in the font-family set. there any real bug in this SCSS code snippet.

 .instructorNameText{
    color: $blue;
    font-size: 14px;
    font-family: 'Roboto-Regular';
Unexpected missing generic font family
 }

[Colin]

Hey there.

As requested in teh template post – What version of SonarQube are you using?

[Appstek (Design)]

Hi Colin,

Thanks,I’m using 9.8.0.63668 version of SonarQube.

[Colin]

Hey there.

If you read the rule description, I think you’ll discover why an issue is raised.]

If none of the font names defined in a font or font-family declaration are available on the browser of the user, the browser will display the text using its default font. It’s recommended to always define a generic font family for each declaration of font or font-family to get a less degraded situation than relying on the default browser font. All browsers should implement a list of generic font matching these families: Serif, Sans-serif, cursive, fantasy, Monospace.

What happens in your code if Roboto-Regular isn’t available in the browser?

[Appstek (Design)]

Hi Colin,
I tried it with your reply,
Here is my Code in react native, it’s not accepting “font-family: ‘Poppins’,sans-serif ;” this syntax of code throwing error in sass styles, Please look into screen shot.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap');

.container {
  flex: 1;
}
.labelBlack {
  padding-left: 10px;
  padding-right: 10px;
  font-family: 'Poppins',sans-serif ;
  color: $lightblack;
  align-self: center

}

[gab (Gabriel Vivas)]

Hi @Appstek,

I know this is ancient, but I was wondering if you found your problem?

From what I can see, this is a true finding from Sonar and the sans-serif generic family should work according to the docs: Text · React Native

It looks like you had some other syntax error. Perhaps the space before the semi-colon? That shouldn’t be an issue in normal CSS, but I don’t know if after preprocessing from SCSS and then in React Native this might cause a fluke.

Let me know if you find out!