Use Multiple @Font-Face Rules in CSS

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

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.

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;
}

Multiple font-weights, one @font-face query

Actually there is a special flavor of @font-face that will permit just what you're asking.

Here's an example using the same font-family name with different styles and weights associated with different fonts:

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Regular-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Italic-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Bold-webfont.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-BoldItalic-webfont.ttf") format("truetype");
  font-weight: bold;
  font-style: italic;
}

---

You can now specify font-weight:bold or font-style:italic to any element you like without having to specify the font-family or overriding font-weight and font-style.

body { font-family:"DroidSerif", Georgia, serif; }

h1 { font-weight:bold; }

em { font-style:italic; }

strong em {
  font-weight:bold;
  font-style:italic;
}

---

For a full overview of this feature and the standard use take a look at this article.

---

EXAMPLE PEN

How can I correctly import and use more than one font in CSS?

Try writing each of them like this:

@font-face{
    font-family:'Tangerine-Bold';
    font-weight: bold;
    src: local('Tangerine-Bold'), url('fonts/Tangerine-Bold.ttf') format('truetype');
}
@font-face{
    font-family:'Roboto-Regular';
    font-weight: normal;
    src: local('Roboto-Regular'), url('fonts/Roboto-Regular.ttf') format('truetype');    
}

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

If multiple sources are listed in an @font-face, are all of them loaded on the client side?

A typical browser should attempt to load the fonts in the list one by one, depending on what format it supports, starting from the first in the list. Once it obtains a font file that it can use, it doesn't attempt to load any of the rest of the files in the list. If a browser doesn't support a particular format, it should never attempt to load that font; it should move straight on to the next source and looks at that.

This is similar to how a browser uses a font stack in the font-family property.

Of course, not all browsers behave conformingly to the spec. Some browsers like IE will try to download as many fonts as they can or parse the rule in unexpected ways; see the comments for more info and research.

CSS is already designed to help minimize the load time and number of requests through this sequential approach. If your fonts are taking too long to arrive from your own server, consider using a fast CDN instead like Google Web Fonts, Typekit or Adobe Edge.

How to add multiple font files for the same font?

The solution seems to be to add multiple @font-face rules, for example:

@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans.ttf");
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: italic, oblique;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}

By the way, it would seem Google Chrome doesn't know about the format("ttf") argument, so you might want to skip that.

(This answer was correct for the CSS 2 specification. CSS3 only allows for one font-style rather than a comma-separated list.)

CSS - Include multiple fonts in one CSS file

well every thing looks good except for the font url. you should give the local address of your font. let me give you an full example buddy:

<!DOCTYPE html><html><head><style> @font-face {   font-family: myFirstFont;   src: url(sansation_light.woff);}
div {   font-family: myFirstFont;}</style></head><body>
<div>With CSS3, websites can finally use fonts other than the pre-selected "web-safe" fonts.</div>
<p><b>Note:</b> Internet Explorer 8 and earlier, do not support the @font-face rule.</p>
</body></html>

How to use font-family with same name?

Use different weights.

Give the first one a weight of 200 and the second one a weight of 300. Then, you can use the two:

font-family: 'Montserrat', sans-serif;
font-weight: 200 /* for the first one */ 
/* or font-weight: 300; for the second one */

EDIT: After the OP specified the weights

You can give the following attributes to the second (bold) one:

font-weight: bold;
font-weight: 700; /* fallback */

and the following to the first (regular) one:

font-weight: 300; 

Now, to use the bold one:

font-family: 'Montserrat', sans-serif;
font-weight: bold; /* or 700 */

and to use the normal one, switch the font-weight:

font-weight: 300;

There you go! :)

Mr_Green, fresh out of Google's Font CSS:

A basic analogy to describe how the font-weight rule works

When you describe a font with a name, imagine (in the most abstract of the explanations) that you create an object; but, when you create multiple font-rules with the same name, imagine you create an array. Now, to access and array, you have to use its index. The index here is the font-weight. So, to access different weights (technically, fonts), you use the weight. Continuing the analogy of the array above, you have to manually
define the index, it's not automatically done.

I think this makes it a little more clear.

---

Related Topics