CSS font squirrel not applying properly

Question

I am using two fonts from font squirrel for this practice to style some of the my wordpress widget areas:Gothic and Playfair Display. But for some reason,only Playfair is being applyed and Gothic is being ignored. Because its wordpress widget areas I cant actually display the html but basically the following is the CSS code which again works for one type font only:

CSS:

@font-face{
  font-family: 'Playdisplay';
  src: url('font/PlayfairDisplay-Bold.ttf') format('ttf'),
     url('font/PlayfairDisplay-BlackItalic.ttf') format('ttf'),
     url('font/PlayfairDisplay-BoldItalic.ttf') format('ttf'),
     url('font/PlayfairDisplay-Italic.ttf') format('ttf'),
     url('PlayfairDisplay-Regular.ttf') format('ttf'),
     url('font/PlayfairDisplay-black.ttf') format('ttf');
 font-weight: normal;
 font-style: normal;     
}
@font-face{
   font-family: 'Goth';
   src: url('font/GOTHIC.ttf') format('ttf'),
      url('font/GOTHICB.ttf') format('ttf'),
      url('font/GOTHICBI.ttf') format('ttf'),
      url('font/GOTHICI.ttf') format('ttf');
  font-weight: normal;
  font-style: normal; 
}

.mainfooter h3{
  font-family: Goth, GOTHIC; 
}

footer h1,
footer h2,
footer h3{
  font-family: Playdisplay, PlayfairDisplay-Bold;
}

How can I use both fonts and apply anywhere in the site?

Answer 1

Try placing your font names in single quotes

.mainfooter h3{
  font-family: 'Goth'; 
}

footer h1,
footer h2,
footer h3{
  font-family: 'Playdisplay';
}

Also, you're using relative paths for your font files, check these are correct!