CODEWITHSUNDEEP
cssfont-family
donquixote
donquixote

Reputation: 5511

CSS font-family fallback for icon font?

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 :)

Upvotes: 14

Views: 8160

Answers (3)

Rychart Redwerkz
Rychart Redwerkz

Reputation: 9

@mtonev

emoji - Fonts that are specifically designed to render emoji. https://developer.mozilla.org/en-US/docs/Web/CSS/font-family

The 'other option' is also not suitable. And as similar as emojis and icons may seem: emojis have a unicode representation and iconfonts are just a collection of images

learn more: https://www.sitepoint.com/icon-fonts-vs-svg-debate/

Upvotes: 0

sleske
sleske

Reputation: 83645

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.

Upvotes: 11

mtonev
mtonev

Reputation: 325

You can add "fantasy":

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

Upvotes: 0

Related Questions