How to define the font-family name in the URL to the SVG font?

The recommended code for including webfonts seems to be:

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

As you may note, the name given to the font family is repeated in the URL pointing to the SVG font:

font-family: 'my_font';                    <= "my_font"
url('my-font.svg#my_font') format('svg');  <= "my_font"

Now I don't like my font name to be lowercase and including an underscore. I want it to be "My Font":

font-family: 'My Font';

But then, how do I need to define the font-family name in the SVG url?

url('my-font.svg#My Font') format('svg');
url('my-font.svg#My%20Font') format('svg');
url('my-font.svg#my_font') format('svg');

And what is the purpose of the font-family name in that URL anyway?

After asking this question, I learned that:

a. TTF and WOFF are supported by all current browsers except Opera Mini (and Opera Mini doesn't support SVG fonts either), so no current browser needs SVG fonts.

b. Fonts have been dropped from the SVG2.2 specification in September 2015.

I have therefore removed SVG fonts from my websites and deleted the relevant line from the code given as a sample above. As a result, my question is outdated and no longer relevant.

Solution

The IRI scheme used in url('my-font.svg#my_font') is called a funcIRI and it's actually pointing to the element which has the id my_font inside the my-font.svg document.

I think you can name your font however you want in the font-family property, as long as your are pointing to the correct font IRI in the src one.

(In case of an SVG font, it needs to be pointing to a <font> element.)

The SVG fonts tutorial on the Mozilla Developer Network provides the following example:

<font id="Super_Sans">
  <!-- and so on -->
</font>

<style type="text/css">
@font-face {
  font-family: "Super Sans";
  src: url(#Super_Sans);
}
</style>

<text font-family="Super Sans">My text uses Super Sans</text>