How to INSTALL a Googlefont on my site instead of importing it temporarily?

I'm of the paranoid kind, I want something in place in case google fonts stop their service. My website currently uses a theme with a choice of fonts of which most are google fonts but they are not installed on the server, instead there is a CSS file refering to each that looks like this:

@import url(//fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic&subset=latin,latin-ext);
 
body {
    font-family: 'Noto Sans', sans-serif;
}

Code (markup):

The only font that is not a google font uses a CSS file that looks like this:

body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

Code (markup):

Now I have downloaded the font and I would like to install it on the server so that it can be refered to locally and doesn't have to rely on google's servers so that I'm covered in case they ever shut down their fonts service. How would I do this?
I hope someone can help. Thanks guys!

 

CSS:

@font-face
{
    font-family: "Custom Font";
    src: url("location/font.ttf");
}
 
body
{
    font-family: "Custom Font";
}

Code (markup):

 

Working great! Thanks! I had a problem where it loaded more slowly though so I used a webfont converter and it seems to be working fine now. Only issue is with fine print, the dot after my middle initial touches the initial. Any conversion settings I should use during webfont conversion to make it as much as possible like Google's?

 

Generally speaking if you have "fine print" you shouldn't be using a webfont in the first place -- They should be used with an eyedropper, and I advise against their use on anything remotely resembling flow text -- use them on the occasional heading or banner, and that's IT. Anywhere else most webfonts just piss on accessibility from orbit for SOMEBODY -- due to differences in Browsers, OS, etc.

Doesn't matter how pretty it is, if it's useless to end users what good is it?

 

What would interest me:

Was what Root Scope showed us, the "right way", or is there a better approach?

 

It's just incomplete,as it doesn't specify weight or style, or the FOUR different file formats one should be including for all browsers.

@font-face {
    font-family: 'Noto Sans';
    src: url('fonts/Noto-Sans.eot');
    src: url('fonts/Noto-Sans.eot?#iefix') format('embedded-opentype'),
         url('fonts/Noto-Sans.woff') format('woff'),
         url('fonts/Noto-Sans.ttf') format('truetype'),
         url('fonts/Noto-Sans.svg#Noto_Sans') format('svg');
    font-weight: normal;
    font-style: normal;
}

Code (markup):

Is the complete version -- of course you need the font in SVG, WOFF, EOT and TTF to support the full spectrum of supported devices -- though you could probably drop SVG at this point since that's mostly for older iPhones.