how do i write a second @font-face in my code?

Question

I am using two @font-face fonts for my website. The first one "vera" is appearing in all browsers. The second one "existence" shows on my mac (safari) but not on any other browser. I guess because I have the font locally. I am guessing there is something wrong with my code. I have uploaded both fonts in the same way but I don't know how to write the code. Here is the website and what i have written. The first font shows, the second doesn't:

http://swarthmorebahais.org/

@font-face {
    font-family: 'vera'; src:
            url('vera-webfont.eot') format('eot'), 
            url('vera-webfont.woff') format('woff'), 
            url('vera-webfont.ttf') format('truetype');
}

    {
    font-family: 'existence'; src:
            url('existence-light-webfont.eot') format('eot'), 
            url('existence-light-webfont.woff') format('woff'), 
            url('existence-light-webfont.ttf') format('truetype');
}

Answer 1

you should include an extra src: line with the url of where you got the font from. or where it's hosted on your server.

 e.g  src: url('../urw_vera-webfont.eot');