Your general question about fonts is answered on our Graphics Design site.
Questions such as: "Why font shows up twice in Control Panel / Fonts and how to handle" or "Edit a truetype font" are answer on our Super User site.
Actually merging the fonts for CSS is answered on Stack Overflow, but a question which seems identical to yours is: "How to package all faces of a font into one family file (Mac)" and already answered on our Graphics Design site.
The Fontforge documentation explains:
"The Mac supports a limited range of styles (plain, italic, bold, outline, condensed, expanded and combinations of these) anything outside these must go into a separate family. Then a special table needs to be constructed (called the FOND) which holds pointers to the various fonts in the family. If you open all the fonts you want to be in a given family (and if they have been given the proper names) and then from the plain font select File->Generate Family. This will list all the fonts that FontForge thinks belong to the same family as the current font and will allow you to generate a FOND structure as well as font files for all family members (sometimes all the fonts live in one file, sometimes they don’t, it depends on the font format chosen).".
Finally, identifying fonts is available on our Graphics Design site.
The better site to ask seems to be our Graphics Design site, but there are a couple of other suggestions above. Stack Overflow gets more visitors and might receive a quicker response, while Super User understands more about the operating system and Graphics Design more about the font itself.