551

I'm looking at the MDC page for the @font-face CSS rule, but I don't get one thing. I have separate files for bold, italic and bold + italic. How can I embed all three files in one @font-face rule? For example, if I have:

@font-face {
    font-family: "DejaVu Sans";
    src: url("./fonts/DejaVuSans.ttf") format("ttf");
}
strong {
    font-family: "DejaVu Sans";
    font-weight: bold;
}

The browser will not know which font to be used for bold (because that file is DejaVuSansBold.ttf), so it will default to something I probably don't want. How can I tell the browser all the different variants I have for a certain font?

2
  • As an extension to the question if we use these fonts in WYSIWYG editors like TinyMCE , do we still need the Bold Italics ? Despite the TinyMCE having buttongs to do Bold Italics ? My guess answer is a YES - because interally they look for these files ?
    – Nishant
    Nov 19, 2013 at 14:40
  • possible duplicate of How to merge fonts? Oct 26, 2014 at 20:58

9 Answers 9

893

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

15
  • 160
    The order is important, the bold/italic style must come last.
    – The Who
    Jun 11, 2010 at 12:40
  • 9
    Worth noting that this doesn't work in IE8 (and below), even if you use an EOT. IE will download the alternate typeface, but it won't use it, instead it will fake-bold/italic the regular typeface. Also, Chrome 11 seems to fail render a typeface that's both bold and italic May 5, 2011 at 18:46
  • 2
    This example works perfect for fonts that do have a separate TTF file for bold and italic. But what if the whole font is in one .ttf file and you want to use bold, how does that work?
    – user836645
    Jul 9, 2011 at 11:42
  • 2
    This article does a great job explaining why this works. Key excerpt: "Notice that the font-family property is the same name for all four fonts. Also, the font-style and font-weight match what the font is. Note: The normal weight must be at the top of the list! We haven’t found that the order after that matters."
    – JD Smith
    Jan 15, 2013 at 20:30
  • 19
    I was having trouble with this snipped on the embedded browser Android 4.4. Ended changing font-style: italic, oblique; to just font-style: italic; seemed to fix everything.
    – Xavi
    Jan 10, 2014 at 22:36
91

As of CSS3, the spec has changed, allowing for only a single font-style. A comma-separated list (per CSS2) will be treated as if it were normal and override any earlier (default) entry. This will make fonts defined in this way appear italic permanently.

@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;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: oblique;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: oblique;
}

In most cases, italic will probably be sufficient and oblique rules won't be necessary if you take care to define whichever you will use and stick to it.

2
  • I believe the third and fourth fonts are named wrong, they should have "Italic" instead of "Oblique". Aug 1, 2015 at 3:33
  • 6
    @NathanMerrill as by OP: I have separate files for bold, italic and bold + italic - so there's three different files. This answer corrects the accepted one in that font-style: italic, oblique; is no longer valid, but also that answer used the same file for italic and oblique. Still, worth pointing out that the file is shared in two cases. Aug 1, 2015 at 11:05
32

To have font variation working correctly, I had to reverse the order of @font-face in CSS.

@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}   
@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-Oblique.ttf");
    font-style: italic, oblique;
}
@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-Bold.ttf");
    font-weight: bold;
}
 @font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono.ttf");
}
5
  • Very useful. +1 Nov 18, 2019 at 3:06
  • 2
    What do you mean by "reverse the order"?
    – Nyxynyx
    May 6, 2020 at 14:02
  • @Nyxynyx I think they mean putting the bold and italic versions first and the regular version last.
    – elimisteve
    Jul 27, 2020 at 10:11
  • 1
    that's because you need to set font-weight / font-style to "normal" in the other case, else will get replaced Jan 23, 2021 at 4:35
  • @JeffreyNeo I've set font-weight and font-style to normal and it's not working. Reversing is a must.
    – formicini
    May 24, 2021 at 11:29
19

nowadays,2017-12-17. I don't find any description about Font-property-order‘s necessity in spec. And I test in chrome always works whatever the order is.

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  src: url('#{$fa-font-path}/fa-solid-900.eot');
  src: url('#{$fa-font-path}/fa-solid-900.eot?#iefix') format('embedded-opentype'),
  url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
  url('#{$fa-font-path}/fa-solid-900.woff') format('woff'),
  url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype'),
  url('#{$fa-font-path}/fa-solid-900.svg#fontawesome') format('svg');
}

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400;
  src: url('#{$fa-font-path}/fa-regular-400.eot');
  src: url('#{$fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'),
  url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
  url('#{$fa-font-path}/fa-regular-400.woff') format('woff'),
  url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype'),
  url('#{$fa-font-path}/fa-regular-400.svg#fontawesome') format('svg');
}
15

If you are using Google fonts I would suggest the following.

If you want the fonts to run from your localhost or server you need to download the files.

Instead of downloading the ttf packages in the download links, use the live link they provide, for example:

http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,300italic,400italic,600italic

Paste the URL in your browser and you should get a font-face declaration similar to the first answer.

Open the URLs provided, download and rename the files.

Stick the updated font-face declarations with relative paths to the woff files in your CSS, and you are done.

7
/*
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# dejavu sans
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
/*default version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans.ttf'); /* IE9 Compat Modes */
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'), /* Duplicated name with hyphen */
        url('dejavu/DejaVuSans.ttf') 
        format('truetype');
}
/*bold version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans-Bold.ttf'); 
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'),
        url('dejavu/DejaVuSans-Bold.ttf') 
        format('truetype');
    font-weight: bold;
}
/*italic version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans-Oblique.ttf'); 
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'),
        url('dejavu/DejaVuSans-Oblique.ttf') 
        format('truetype');
    font-style: italic;
}
/*bold italic version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans-BoldOblique.ttf'); 
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'),
        url('dejavu/DejaVuSans-BoldOblique.ttf') 
        format('truetype');
    font-weight: bold;
    font-style: italic;
}
1
  • 1
    After 1+ hour of struggling this solved my issue with the weights on Firefox. Damn. And thanks!
    – Fred Rocha
    Feb 9, 2023 at 14:41
5

I added a custom font like this to my styles.less. Here I have added more one url in 'src' as a fallback.

More you can read here: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src#specifying_fallbacks_for_older_browsers

@font-face {
    font-family: EuclidSquare;
    src: url('/fonts/EuclidSquare-LightItalic.woff2') format('woff2'),
        url('/fonts/EuclidSquare-LightItalic.woff') format('woff'),
        url('/fonts/EuclidSquare-LightItalic.otf') format('opentype');
    font-weight: 300;
    font-style: italic, oblique;
}
@font-face {
    font-family: EuclidSquare;
    src: url('/fonts/EuclidSquare-Light.woff2') format('woff2'),
        url('/fonts/EuclidSquare-Light.woff') format('woff'),
        url('/fonts/EuclidSquare-Light.otf') format('opentype');
    font-weight: 300;
}
@font-face {
    font-family: EuclidSquare;
    src: url('/fonts/EuclidSquare-RegularItalic.woff2') format('woff2'),
        url('/fonts/EuclidSquare-RegularItalic.woff') format('woff'),
        url('/fonts/EuclidSquare-RegularItalic.otf') format('opentype');
    font-style: italic, oblique;
}
@font-face {
    font-family: EuclidSquare;
    src: url('/fonts/EuclidSquare-Regular.woff2') format('woff2'),
        url('/fonts/EuclidSquare-Regular.woff') format('woff'),
        url('/fonts/EuclidSquare-Regular.otf') format('opentype');
}
@font-face {
    font-family: EuclidSquare;
    src: url('/fonts/EuclidSquare-MediumItalic.woff2') format('woff2'),
        url('/fonts/EuclidSquare-MediumItalic.woff') format('woff'),
        url('/fonts/EuclidSquare-MediumItalic.otf') format('opentype');
    font-weight: 500;
    font-style: italic, oblique;
}
@font-face {
    font-family: EuclidSquare;
    src: url('/fonts/EuclidSquare-Medium.woff2') format('woff2'),
        url('/fonts/EuclidSquare-Medium.woff') format('woff'),
        url('/fonts/EuclidSquare-Medium.otf') format('opentype');
    font-weight: 500;
}
@font-face {
    font-family: EuclidSquare;
    src: url('/fonts/EuclidSquare-SemiboldItalic.woff2') format('woff2'),
        url('/fonts/EuclidSquare-SemiboldItalic.woff') format('woff'),
        url('/fonts/EuclidSquare-SemiboldItalic.otf') format('opentype');
    font-weight: 600;
    font-style: italic, oblique;
}
@font-face {
    font-family: EuclidSquare;
    src: url('/fonts/EuclidSquare-Semibold.woff2') format('woff2'),
        url('/fonts/EuclidSquare-Semibold.woff') format('woff'),
        url('/fonts/EuclidSquare-Semibold.otf') format('opentype');
    font-weight: 600;
}
@font-face {
    font-family: EuclidSquare;
    src: url('/fonts/EuclidSquare-BoldItalic.woff2') format('woff2'),
        url('/fonts/EuclidSquare-BoldItalic.woff') format('woff'),
        url('/fonts/EuclidSquare-BoldItalic.otf') format('opentype');
    font-weight: bold;
    font-style: italic, oblique;
}
@font-face {
    font-family: EuclidSquare;
    src: url('/fonts/EuclidSquare-Bold.woff2') format('woff2'),
        url('/fonts/EuclidSquare-Bold.woff') format('woff'),
        url('/fonts/EuclidSquare-Bold.otf') format('opentype');
    font-weight: bold;
}

body {
    font-family: EuclidSquare, Lato, sans-serif;
}

0

For Create React App see my other SO answer here

  1. If you choose to link the css file directly to your public/index.html:
@font-face {
  font-family: "FontName"; <---
  font-style: normal; <---
  font-weight: normal;
  src: url("path-to-assets/fonts/FontName.ttf") format("truetype");
}
@font-face {
  font-family: "FontName"; <---
  font-style: italic; <---
  font-weight: normal;
  src: url("path-to-assets/fonts/FontName-Italic.ttf") format("truetype");
}
  1. If you choose to link the css file via Js for bundling:
@font-face {
  font-family: "FontName"; <---
  font-style: normal; <---
  font-weight: normal; /* normal | 300 | 400 | 600 | bold | etc */
  src: url("path-to-assets/fonts/FontName.ttf") format("truetype");
}
@font-face {
  font-family: "FontNameItalic"; <---
  font-style: normal; <----
  font-weight: normal; /* normal | 300 | 400 | 600 | bold | etc */
  src: url("path-to-assets/fonts/FontName-Italic.ttf") format("truetype");
}
0

If you are using a Google Font, I suggest using @import url("@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@900&display=swap');") and specifying font-family: 'Saira Condensed', sans-serif; as the CSS Rule.

Not the answer you're looking for? Browse other questions tagged or ask your own question.