Multiple Fonts in Font-Family Property

Multiple fonts in Font-Family property?

Yes.

The font-family property can hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font.

From: http://www.w3schools.com/cssref/pr_font_font-family.asp

And as good practice:

Start with the font you want, and always end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.

What is the significance of giving multiple font family name

Not all browsers support all the fonts.

So, giving multiple font families select the font that is supported by the browser, starting from the first font. If first font is supported then it is used, otherwise it checks if next font is supported and so on. The leftmost font that is supported is used.

font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;

In this case, Lato is not supported by all browsers. So, next font Helvetica Neue is checked.

You'll also notice that the last fonts are common, that are supported by all browsers Arial and sans-serif in this case.

FROM MDN

The font-family CSS property lets you specify a prioritized list of font family names and/or generic family names for the selected element. Values are separated by a comma to indicate that they are alternatives. The browser will select the first font on the list that is installed on the computer or that can be downloaded using a @font-face at-rule.

Web authors should always add at least one generic family in a font-family list, since there's no guarantee that a specific font is installed on the computer or can be downloaded using a @font-face at-rule. The generic family lets the browser select an acceptable fallback font when needed.

How do add multiple font-family to my style sheet using @font-face rule?

You can always add multiple @fontface in your css provided with the font-family name.

@font-face {
    font-family: myFirstFont;
    src: url(myFirstFont.woff);
    font-weight: bold;
}

@font-face {
    font-family: mySecondFont;
    src: url(mySecondFont.woff);
    font-weight: bold;
}

CSS multiple font-families?

It means that the font will fall back to the next font listed if the client's browser doesn't have the prior font available.

By listing out multiple fonts, you can ensure the client gets to see the font you want to display even if the first font you have listed is not available in their browser.

In your example:

body {
  background-color: silver;
  color: white;
  padding: 20px;
  font-family: Arial, Verdana, sans-serif;
}

Arial will fallback to Verdana which will fall back to sans-serif

Best practice:

Start with the font you want, and always end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.

As an interesting tidbit font-families can be significant on a character by character basis:

The font-family property specifies a list of fonts, from highest priority to lowest. Font selection does not simply stop at the first font named in the list that is on the user's system. Rather, font selection is done one character at a time, so that if an available font does not have a glyph that can display a character needed, the later available fonts are tried. However, this doesn't work in Internet Explorer 6 or earlier.

Use multiple @font-face rules in CSS

Note, you may also be interested in:

Custom web font not working in IE9

Which includes a more descriptive breakdown of the CSS you see below (and explains the tweaks that make it work better on IE6-9).

---

@font-face {
  font-family: 'Bumble Bee';
  src: url('bumblebee-webfont.eot');
  src: local('☺'), 
       url('bumblebee-webfont.woff') format('woff'), 
       url('bumblebee-webfont.ttf') format('truetype'), 
       url('bumblebee-webfont.svg#webfontg8dbVmxj') format('svg');
}

@font-face {
  font-family: 'GestaReFogular';
  src: url('gestareg-webfont.eot');
  src: local('☺'), 
       url('gestareg-webfont.woff') format('woff'), 
       url('gestareg-webfont.ttf') format('truetype'), 
       url('gestareg-webfont.svg#webfontg8dbVmxj') format('svg');
}

body {
  background: #fff url(../images/body-bg-corporate.gif) repeat-x;
  padding-bottom: 10px;
  font-family: 'GestaRegular', Arial, Helvetica, sans-serif;
}

h1 {
  font-family: "Bumble Bee", "Times New Roman", Georgia, Serif;
}

---

And your follow-up questions:

Q. I would like to use a font such as "Bumble bee," for example. How can I use @font-face to make that font available on the user's
computer?

Note that I don't know what the name of your Bumble Bee font or file is, so adjust accordingly, and that the font-face declaration should precede (come before) your use of it, as I've shown above.

Q. Can I still use the other @font-face typeface "GestaRegular" as well? Can I use both in the same stylesheet?

Just list them together as I've shown in my example. There is no reason you can't declare both. All that @font-face does is instruct the browser to download and make a font-family available. See: http://iliadraznin.com/2009/07/css3-font-face-multiple-weights

The right way to include multiple fonts in css

The second option: you use the same font name, but for each variant you intend to use, you need to specify (a) the variation and (b) the alternate resource to use as font.

This ensures that in your actual content CSS you can do things like:

p {
  font-family: Roman;
  font-style: regular;
  font-weight: 400;
}

p em {
  font-style: italic;
}

p strong {
  font-weight: 800;
}

And things will work correctly. Contrast this to the ridiculous notion of "changing the font family just because you wanted the same font, but italic". Let's not do that.

Dealing with multiple font files easier

You could safely remove some older file types (unless you need the best legacy support):

Example: "Inter" - generated by google web font helper

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/inter-v11-latin-regular.eot'); 
    src: local(''),
         url('fonts/inter-v11-latin-regular.eot?#iefix') format('embedded-opentype'), 
         url('fonts/inter-v11-latin-regular.woff2') format('woff2'), 
         url('fonts/inter-v11-latin-regular.woff') format('woff'), 
         url('fonts/inter-v11-latin-regular.ttf') format('truetype'),
         url('fonts/inter-v11-latin-regular.svg#Inter') format('svg'); 
  }

Could be reduced to:

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/inter-v11-latin-regular.woff2') format('woff2'),
         url('fonts/inter-v11-latin-regular.woff') format('woff');
  }

woff should suffice as a fallback for older browsers by now. (Even supported by ie 9 - see caniuse record).

eot was exclusively used by Microsoft's Internet Explorer. If you're not developing for special cases like windows embedded system applications (depending on custom ie builds) you don't need them.

svg only supported by some legacy safari versions - ditch them.

truetype Overall probably the best browser support (widely used for desktop applications) but not as optimized for web usage (larger in file size). Might be needed for tasks like dynamic pdf generation (e.g domPdf or mPdf: most of the time you'll need to manually define embedded fonts at some point)

local better remove this rule! Especially firefox had issues displaying local fonts due to security settings.

CSS preprocessor mixin

As @Parapluie already pointed out you could use a mixin to simplify your css coding.

SCSS mixin

based on @jonathantneal gist

@mixin font-face($name, $path, $weight: null, $style: null, $exts: woff2 woff ttf otf) {
    $src: null;
    $formats: (
        otf: "opentype",
        ttf: "truetype"
    );

    @each $ext in $exts {
        $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
        $src: append($src, url(quote($path + "." + $ext)) format(quote($format)), comma
      );
    }

    @font-face {
        font-family: quote($name);
        font-style: $style;
        font-weight: $weight;
        src: $src;
    }
}

@include font-face('Inter', 'fonts/Inter', 400, normal, woff2 woff ttf);
@include font-face('Inter', 'fonts/Inter', 400, italic, woff2 woff ttf);  

Codepen example:

You can switch between compiled/uncompiled css view to see the output.

Variable fonts

font-face property values accept ranges like e.g for a weight range from 100–900 (light/thin to black).

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  src: url('https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2') format('woff2')
}

SCSS code

@include font-face('Inter VF', 'https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw', 100 900, normal, woff2);

A presumably more accurate rule would add specific variable font format values like format('woff2-variations') and format('woff2 supports variations'):

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  src: url('https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2') format('woff2 supports variations'),
  url('https://fonts.gstatic.com/s/inter/v11/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2') format('woff2-variations');
}

Unfortunately, these declarations are not yet supported by some browsers and many documentations are outdated due to recent API changes.

So you should still test your rules in different browsers.

How to fetch google variable fonts

When using the google fonts UI you might not get the actual variable font .woff2 file.

"fonts.googleapis.com/css2?family=Inter:wght@100..900"

should work in most modern browsers:

The returned css will contain variable font file URLs

"fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900"

(generated using the UI) will return seperate font files for each weight.

See also MDN Docs: Variable fonts guide

Use multiple custom fonts using @font-face?

You simply add another @font-face rule:

@font-face {
    font-family: CustomFont;
    src: url('CustomFont.ttf');
}

@font-face {
    font-family: CustomFont2;
    src: url('CustomFont2.ttf');
}

If your second font still doesn't work, make sure you're spelling its typeface name and its file name correctly, your browser caches are behaving, your OS isn't messing around with a font of the same name, etc.

Why does computed style show more than one font-family?

I found that Chrome now shows "Rendered Fonts" at the bottom of the Computed tab.
In the past, it used to show it in the font-family property in the Computed tab

Turns out Firefox used to support the Fonts sub-tab in the Inspector tab, but
that has been removed in Feb 2016.

---

Related Topics