Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adding fallback fonts to the @font-face definition

Is it possible to add a fallback font directly to the definition of the font-face?

Example:

@font-face {
  font-family: 'MyWebFont', Arial, Helvetica, sans-serif;
  src: url('fonts/MyWebFont.eot');
  src: url('fonts/MyWebFont.eot?#iefix') format('embedded-opentype'),
  url('fonts/MyWebFont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

And then using it as font-family value with automatic fallback, like so:

p {
  font-family: MyWebFont;
}

My goal is not to having to define the fallback fonts everywhere I define a new font-family. If not like above, can I somehow achieve this without JavaScript? Thanks for your help!

like image 772
René Schubert Avatar asked Nov 14 '14 10:11

René Schubert


People also ask

What is font fallback?

A fallback font is a reserve typeface containing symbols for as many Unicode characters as possible. When a display system encounters a character that is not part of the repertoire of any of the other available fonts, a symbol from a fallback font is used instead.

Why do we use fallback fonts in CSS?

CSS font Fallbacks provide a backup for the fonts i.e. if one font doesn't work properly then the browser will try the other one. For good coding practice write a generic font family at the end of the list and choose the font fallback within the same font family.

What is the meaning of font face?

@font-face is a CSS rule that allows you to input your own font to appear on a website even when the particular font is not installed on the visitor's computer.

What is fallback in CSS?

The fallback descriptor can be used to specify a counter style to fall back to if the current counter style cannot create a marker representation for a particular counter value.


3 Answers

No, you cannot specify any fallback fonts inside a @font-face rule, because such a rule defines a font face and assigns a name to it. Inside the rule, the font-family part can contain only one name, the name you choose to assign. It would be pointless list several names there, since only the first one can possibly matter (and, besides, in this context no name has any predefined meaning, e.g. Arial would not mean the Arial font but be just an arbitrary assigned name).

Fallback fonts can be specified only in normal font-family rules.

Consider organizing your style sheet so that the relevant font-family list appears only once, using a suitable list of selectors, like

p, blockquote, .foobar, .something {
   font-family: MyWebFont, Arial, Helvetica, sans-serif;
}
like image 152
Jukka K. Korpela Avatar answered Sep 22 '22 17:09

Jukka K. Korpela


CSS Variables is one solution to stay DRY

:root {
     --MainFont: "Gotham", "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
     --HeavyFont: "Gotham Black", "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}

body {
     font-family: $MainFont;
}
h1 {
    font-family: $HeavyFont;
}
like image 33
GeekyMonkey Avatar answered Sep 20 '22 17:09

GeekyMonkey


You can totally add fallback fonts to a @font-face rule!* You don't add them to the font-family descriptor (that's for giving your font family a name); you add them to the src descriptor, which accepts multiple values. If the browser can't find (or doesn't support) the first font, it will try loading the next one, and so on. You can have it look for fonts installed on the user's system using the local() function:

@font-face {
  font-family: bodytext;
  src: url(fonts/MyWebFont.woff) format("woff"),
       local(Arial),
       local(Helvetica);
}

Some people may argue that url() and local() weren't designed to be used this way. Typically, they're used to provide local and remote versions of the same font, with the web-font functioning as a fallback if the local font can't be found. Here's such an example from the W3C specs:

@font-face {
  font-family: MyGentium;
  src: local(Gentium),    /* use locally available Gentium */
       url(Gentium.woff); /* otherwise, download it */
}

But there's nothing to say you can't use it in place of a regular font stack. Check out this W3C example:

Create an alias for local Japanese fonts on different platforms:

@font-face {
  font-family: jpgothic;
  src: local(HiraKakuPro-W3), local(Meiryo), local(IPAPGothic);
}

*There are some caveats though. Don't expect this to work exactly like the familiar font-family stack that you're used to. Firstly, there's no fallback for individual characters that may not be supported by your font. Secondly, you can't refer to generic font-families (like sans-serif, system-ui, etc). For those features, you're stuck with the classic font stack. But you can happily use both features, encapsulating all your named fonts in the @font-face rule, and adding the generic font as your last-resort fallback in the font-family declaration:

p {
  font-family: bodytext, sans-serif;
}
like image 34
Kal Avatar answered Sep 18 '22 17:09

Kal