Generic font family check

[Olegas]

New rule 'generic-font-family'

This rule checks, that each font/font-family declaration contains a 'generic' font family (one of the following: serif, sans-serif, cursive, monospace, fantasy).

Also, it is checks that 'generic' font family is specified as an identifier, not as a string, cause this prevents correct rendering.

Specifying a 'generic' font family is needed to keep text rendering as near as possible to desired style on systems, where other specified fonts are not exists, some kind of a fallback.

[Olegas]

It is like #275 but has some more checks and avoiding some rough edges, which, as far as i can see, will fail in aforementioned task.

[nzakas]

Can you provide some examples that this rule would catch?

@stubbornella thoughts?

[Olegas]

Rule checks for font family declarations with no generic alternative

/* Warning! No generic! */
.clazz {
  font-family: Tahoma;
}

/* Warning! No generic! */
.clazz2 {
  font: 12px Georgia;
}

This is how we can fix above mentioned rules...

/* OK */
.clazz {
  font-family: Tahoma, sans-serif;
}

/* OK */
.clazz2 {
  font: 12px Georgia, serif;
}

Following lines will not cause a warning

/* OK */
@font-face {
    font-family: Pompadur; /* a custom name declaration */
    src: url(fonts/pompadur.ttf); /* a custom font file */
}

But the following usage - does

/* Warning! No generic! */
.myFont {
  font-family: Pompadur;
}

And how to fix it...

/* OK */
.myFont {
  font-family: Pompadur, sans-serif;
}

Also, using an inherit keyword will not flag

/* OK */
.child {
  font-family: inherit;
}

The another important thing is about quotes. "serif" and serif - this is not the same!

/* Warning! Quoted Generic */
.iLikeQuotes {
  font-family: Tahoma, "serif";
}

To fix it - just remove the quotes

/* OK */
.iLikeQuotes {
  font-family: Tahoma, serif;
}

[philipwalton]

I mentioned this in another thread about this issue, but fallback fonts aren't needed for pseudo elements.

For example, if I define the following rule:

.icon-remove:before {
  content: "...";
  font-family: "MyIconFont";
}

This would be fine. If the font isn't found or there was an error in loading, it would fall back to the font defined on the parent rather than falling back to the system font.

[Olegas]

@philipwalton sounds reasonable... I'll fix it and update the pull request.

[philipwalton]

@Olegas I remember testing it with :before and :after, but you might want to check :first-letter and :first-line as well, just in case.

[Olegas]

@philipwalton What do you think, how to deal with such rules:

.clazz,
p:hover {
  font-family: Tahoma;
}

.clazz lacks of generic, but p:hover doesn't...

[philipwalton]

I'd say require a backup, since .clazz should have one. It's certainly not bad to have a backup font declared on a pseudo element, it just shouldn't be considered an error if it's not there.

[frvge]

@Olegas , could you please give fixing @philipwalton 's comments a try?

[Olegas]

Will take a look soon, this weekend. Sorry for delay.