custom fonts help

Hey Guys I know this is asked a lot. I am trying to impliment a custom font based off of this post

https://kriesi.at/support/topic/how-to-add-a-custom-font/

my website is http://www.jackandaddi.com – and I am using a child theme

I have used font squirel to make the files. I have added the @font-face code to my style.css file it looks like this:

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

body, body p { font-family: 'clairehandregular-webfont', Arial, sans-serif; }

I then tried to make a basic “ugly” edit to test this. I see the font change but it is changing to arial.

I am guessing I am not putting the 4 font files in the right place. The documentation says to put them by your css files. Dude says to put them in your css directory. (but on the parent theme) If I just make the css directory on my child it doens’t work of course. not jsut puttign the files in the child root.

Please explain how I make it work in the child theme setup? were do my 4 font files go?