Use multiple @font-face rules in CSS

Question

How can I use more than @font-face rule in my CSS?

I've inserted this into my stylesheet:

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

@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');
}

This currently only applies for the whole body of text on the site. But, I would like to specify h1 to use a different font. How can I do this?

DavidRR · Accepted Answer · 2017-08-22 16:47:51Z

120

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

edited Aug 22, 2017 at 16:47

DavidRR

19.8k27 gold badges114 silver badges202 bronze badges

answered Feb 2, 2011 at 9:23

Jared Farrish

49.4k17 gold badges100 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

CWarrington Over a year ago

thank you for this answer. 'All that @font-face does is instruct the browser to download and make a font-family available.' is exactly what I was looking for on if @font-face could be used more than once or if it overrides a previous declaration.

Surya R Praveen · Accepted Answer · 2018-02-09 12:05:55Z

42

@font-face {
    font-family: Kaffeesatz;
    src: url(YanoneKaffeesatz-Thin.otf);
    font-weight: 200;
}
@font-face {
    font-family: Kaffeesatz;
    src: url(YanoneKaffeesatz-Light.otf);
    font-weight: 300;
}
@font-face {
    font-family: Kaffeesatz;
    src: url(YanoneKaffeesatz-Regular.otf);
    font-weight: normal;
}
@font-face {
    font-family: Kaffeesatz;
    src: url(YanoneKaffeesatz-Bold.otf);
    font-weight: bold;
}
h3, h4, h5, h6 {
    font-size:2em;
    margin:0;
    padding:0;
    font-family:Kaffeesatz;
    font-weight:normal;
}
h6 { font-weight:200; }
h5 { font-weight:300; }
h4 { font-weight:normal; }
h3 { font-weight:bold; }

answered Feb 9, 2018 at 12:05

Surya R Praveen

3,7551 gold badge29 silver badges28 bronze badges

Comments

Luke Xu · Accepted Answer · 2023-07-28 14:53:10Z

18

Multiple variations of a font family can be declared by changing the font-weight and src property of @font-face rule.

/* Regular Weight */
@font-face {
    font-family: Montserrat;
    src: url("../fonts/Montserrat-Regular.ttf");
}

/* SemiBold (600) Weight */
@font-face {
    font-family: Montserrat;
    src: url("../fonts/Montserrat-SemiBold.ttf");
    font-weight: 600;
}

/* Bold Weight */
@font-face {
    font-family: Montserrat;
    src: url("../fonts/Montserrat-Bold.ttf");
    font-weight: bold;
}

Declared rules can be used by following

/* Regular */
font-family: Montserrat;


/* Semi Bold */
font-family: Montserrat;
font-weight: 600;

/* Bold */
font-family: Montserrat;
font-weight: bold;

edited Jul 28, 2023 at 14:53

Luke Xu

2,4703 gold badges23 silver badges48 bronze badges

answered Jun 3, 2020 at 3:45

Prince Ahmed

1,13812 silver badges10 bronze badges

Collectives™ on Stack Overflow

Use multiple @font-face rules in CSS

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related