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

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
 }

Hey there.

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

Hi Colin,

Thanks,I’m using 9.8.0.63668 version of SonarQube.

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?

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

}

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!