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.

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.