How to add text with music uncommon font to HTML

Question

I am developing a theory music web page. In music notation there are some symbols like "flat" and "sharp" that can be achieved with standar characters like "b" and "#", but the final output is very unpleasant.

I have instaled special fonts to use these (and many other) music symbols, but obviously they are not installed in the vast majority of computers.

1.- Is there a way to safely use this fonts?

2.- If so, what HTML tag should I use? Will it be Ok to use the span Tag with a Class="MusicNotation" inside a p Tag to change the font of these music symbols via CSS? Is there a better ( more standar ) way to do this?

I provide an example of what I will do

This is the HTML

<p>This is a <spam class="MusicNotation">G#</spam>chord</p>

And this is the CSS:

#MusicNotation { font-family: Repreise }

Answer 1

Don't use a font-family that is unlikely to be installed on the target machines.

I'm assuming those symbols are available in Unicode somehwere, but there are many fonts that won't contain a full Unicode set and they'll show up as little boxes or worse.

@font-face is the new technology for embedding a font into a page, but you'll have to do some grunt work to get it working.

Answer 2

If you are open on using Flash, you can use sIFR. Take a look here: http://www.mikeindustries.com/blog/sifr

Answer 3

This will help you:

There are also HTML code alternatives for making music note symbols. There are officially 7 music note symbols that can be displayed through HTML codes. Just copy and paste or type these following codes. Numbers should always be preceded by the ampersand and sharp sign, and should end with a semi-colon. For the quarter music note, you should type ♩ and it should look like this: ♩.

To make an eighth music note, type ♪ and it should look like this: ♪.

To make a beamed eighth music note, type ♫ and it should look like this: ♫.

To make a beamed sixteenth music note, type ♬ and it should look like this: ♬

To make a music flat sign, type ♭ and it should look like this: ♭

To make a music natural sign, type &#9838 and it should look like this: ♮.

To make a music sharp sign, type &#9839 and it should look like this: ♯.

http://www.howtodothings.com/hobbies/how-to-write-music-note-code

Be sure to use <meta charset="utf-8">