Embedding a Custom Font Correctly

Hello everyone,
I have selected a custom font for some key headers and titles. I have it downloaded onto my computer and my site looks good with it. I found instructions on the internet about how to embed the custom font on the stylesheet (I’m assuming) so that it will appear on most browsers. Below are the instructions, then further are my questions:
********************************************************************************
@font-face {
font-family: cool_font;
src: url(‘cool_font.ttf’);
}

After that you can use it just like a normal CSS declaration:

p.custom_font{
font-family: cool_font; /* no .ttf */
}
********************************************************************************
I’ve dumped the site twice and really don’t want to have to start over again, so here are my questions…

On the stylesheet of my theme, under the title “overall” I’ve located the “font-family: Arial, Helvetica, sans-serif:” Where exactly do I insert the above code? Do I simply add it to the next line?

I have the font downloaded on my computer, but I don’t know how to create the path that when I use “src: url(‘cool_font.ttf’);” that it knows where to go to get the font.

I have used the font on my menu and posts, but because it’s on my computer it shows up — nice. Now I want others to be able to view it too.

I’m not sure if I’m providing enough information, but your help would be very much appreciated.
thank you,
GS