How to add multiple font files for the same font?

fonts css font-face

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?

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 ?

possible duplicate of How to merge fonts?

Peter Mortensen

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

The order is important, the bold/italic style must come last.

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

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?

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

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.

Josiah

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.

I believe the third and fourth fonts are named wrong, they should have "Italic" instead of "Oblique".

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

Cedric Simon

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

Very useful. +1

What do you mean by "reverse the order"?

@Nyxynyx I think they mean putting the bold and italic versions first and the regular version last.

that's because you need to set font-weight / font-style to "normal" in the other case, else will get replaced

@JeffreyNeo I've set font-weight and font-style to normal and it's not working. Reversing is a must.

xlaoyu.Lee

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

Peter Mortensen

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.

Jerry T

/*
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# 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;
}

Abdul Malik

I added a custom font like this to my styles.less

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

piouson

For Create React App see my other SO answer here

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

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

How to add multiple font files for the same font?

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Links

Contact US