CSS font-family fallback for icon font?

Question

My IDE inspects my CSS files, and complains if I put a font-family rule which does not have a generic fallback. In general, I have to agree with my IDE, and I will happily add the font callback.

Example:

.selector {
  font-family: Arial;  /* IDE complains. */
  font-family: Arial, sans-serif;  /* IDE is happy. */
}

However, sometime the font-family is an icon font (I think fontawesome is one of those), and a fallback does not really make sense. Or does it?

.my-icon {
  font-family: 'my-icon-font';  /* IDE complains. */
  font-family: 'my-icon-font', serif;  /* IDE is happy, but it does not make sense. */
}

Question

Could there be any sensible fallback that would make sense to append to a font-family rule with an icon font?

Additional motivation

In my case, it is mainly my IDE that is nudging me to add a generic font callback. As a last resort I could disable, suppress or ignore this inspection.

However, in other teams there might be strict rules about code conventions, perhaps even a mechanism that blocks commits if they do not comply.

Or what if I am the author of a code inspection tool, or in the process of defining the coding conventions to be used in a project? Then I definitely want to know what would be the "correct" or smartest way to do this :)

Answer 1

As discussed in the comments, this is a bogus warning.

As you point out yourself, there is no generic font family that is suitable as a fallback for an icon font - nor can there be, as icon fonts are not standardized.

The relevant spec (CSS Fonts Module Level 3) only lists the following generic families:

• serif
• sans-serif
• cursive
• fantasy
• monospace

None of these is suitable - as they are all explicitly not intended for icon/picture fonts.

So you should probably find a way to suppress the warning. Ideally, the system would allow you to add a list of fonts that the warning should be suppressed for (such as icon fonts). Otherwise, you'll just have to suppress the warning entirely.

---

Side note: Fallback fonts are only really necessary if you want to use a font that is installed on the user's computer - such as standard Windows fonts like Arial. In that case you need a fallback, because you cannot be sure what the user has installed.

If you use a web font that the browser can download, there should never be a need for a fallback font. It is still nice to include in case the font download fails, but IMHO not as important.

Answer 2

You can add "fantasy":

.my-icon {
  font-family: 'my-icon-font', fantasy;
}