Merge Ttf Font Files (For Using in CSS)

merge TTF font files (for using in CSS)

You cannot. A single font file describes the glyphs used for a particular font in a particular style.

While you could probably merge them and use Stylistic Sets to refer to the different fonts that is something you cannot do in CSS (and most other applications neither). Apart from that (and things like Arabic) there is (as far as I know) no straightforward way to have different glyphs for the same code points in a font file.

How to merge fonts?

An easy way to combine multiple fonts in one file is to encode them in base64 and embed them in CSS. They will still be different fonts though and the total size will increase. There are various online tools that can create the css for font files you upload, like this one.

How can I combine multiple styles of fonts into one rule?

I don't think so, as far as I know, your approach is the best way to specify each style within each font.

After your set up, if you apply font-family:'roboto', with italic and bold, it will automatically fetch the font file from 'Roboto-BoldItalic.ttf' for example.

If you want to have shorter and easier way to write it and not bother about the font presentation so much, I would suggest you just apply 'Roboto-Regular.ttf' the single font file will do. It will still response to the css bold and italic, just that it will not be as accurate as the original font.

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

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

Can I merge a font-family in CSS to have more font varians via @font-face?

It seems that you can, this is from the W3 Spec:

These descriptors define the characteristics of a font face and are
used in the process of matching styles to specific faces. For a font
family defined with several @font-face rules, user agents can either
download all faces in the family or use these descriptors to
selectively download font faces that match actual styles used in
document. The values for these descriptors are the same as those for
the corresponding font properties except that relative keywords are
not allowed, ‘bolder’ and ‘lighter’. If these descriptors are omitted,
default values are assumed.

Take a look at this example from Google Fonts:

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: local('Open Sans Light Italic'), local('OpenSansLight-Italic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxh_xHqYgAV9Bl_ZQbYUxnQU.woff) format('woff');
}

A usage example:

.will-use-the-first-font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
}

.will-use-the-second-font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
}

.will-use-the-third-font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 300;
}

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

---

Related Topics