14

I have a number of fonts,

  • OpenSans-bold.ttf
  • OpenSans-boldItalic.ttf
  • OpenSans-extrabold.ttf
  • OpenSans-italic.ttf
  • OpenSans-light.ttf

How would I go on about to just create one file, as oppose to this many different files? And perhaps use them on CSS like I would normally, or like you would on photoshop?

e.g.

small{font-family:"OpenSans"; font-weight: normal;}
strong{font-family:"OpenSans"; font-weight: bold;}
h2 {font-family:"OpenSans"; font-weight: bolder;}

Any help would be appriciated.

2

2 Answers 2

12

You need the different font files if you wish to use different typefaces (regular, italic, bold, etc.), because each typeface is implemented as a separate font file (actually, you even need it in different font formats, to cover different browsers).

But you can use them as a single font family, much like you use, say, just Arial and apply italics and bolding to it, using CSS directly or indirectly (via HTML, e.g. h2 elements are bold by default). For this, you need to declare a font family.

E.g., FontSquirrel generates CSS code that defines each typeface as a font family. This is possible, but illogical and inconvenient. For example, it generates

@font-face {
    font-family: 'open_sansbold';
    src: url('opensans-bold-webfont.eot');
    src: url('opensans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('opensans-bold-webfont.woff') format('woff'),
         url('opensans-bold-webfont.ttf') format('truetype'),
         url('opensans-bold-webfont.svg#open_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

To make things more logical, change the font-weight value, and change the font-family name to one that you use in different @font-face rules (for the different typefaces of the family). E.g.,

@font-face {
    font-family: 'Open Sans';
    src: url('opensans-bold-webfont.eot');
    src: url('opensans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('opensans-bold-webfont.woff') format('woff'),
         url('opensans-bold-webfont.ttf') format('truetype'),
         url('opensans-bold-webfont.svg#open_sansbold') format('svg');
    font-weight: bold;
    font-style: normal;
}
4
  • this is the way I am doing it at the moment, but the fonts which was passed on to me added up to 2.8mb which is a lot. hence why I asked if I could somehow manage to merge font's and use them as a normal font instead of as separate font.
    – Val
    Jan 30, 2013 at 16:42
  • 2
    The normal way of using fonts is that each typeface is a font file of its own. It would not save space to combine them into one file, and besides, that’s not how font technology works. Jan 30, 2013 at 18:08
  • @JukkaK.Korpela Adding a italic or bold property to a font-family is not always same as downloading a separate font. As an example, please check Roboto from Google Web Fonts. Just adding a font-weight of 900 to Roboto-Regular does not make it same as Roboto-Black.
    – ChrisOdney
    Aug 2, 2017 at 8:06
  • @ChrisOdney it is the same when it is set up correctly, as this example does. google fonts does this in their link element font face call: fonts.googleapis.com/css?family=Roboto:400,900 declaring roboto-regular and robot-black font-family names seems like where this is confusing.
    – albert
    Feb 18, 2018 at 19:46
5

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.

2
  • 1
    well using BASE64 isn't a good idea since the font will never be cached...so you gain nothing, and actually you make things worse, because every time your CSS changed, it will force the user to download the font again. BTW that online tool only lets you merge up to 3 files.
    – vsync
    Apr 22, 2014 at 12:32
  • 4
    Just a thought... We can combine fonts into special fonts.css that will be separated from other CSS of site. So if you change (add/remove) fonts than only fonts.css should be reloaded.
    – Kiryl
    Nov 29, 2014 at 9:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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