Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to merge fonts?

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.

like image 470
Val Avatar asked Jan 30 '13 12:01

Val


2 Answers

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;
}
like image 157
Jukka K. Korpela Avatar answered Oct 15 '22 14:10

Jukka K. Korpela


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.

like image 36
kapex Avatar answered Oct 15 '22 14:10

kapex