@font-face works with Suffusion theme, but nothing else

Hi,
I’m very sorry if this has been answered before. I’ve searched and found similar questions that aren’t really the same and tried some solutions, but have had no luck.

Here’s my dilemma. I’ve been trying to use @font-face declarations with a new theme called Lato. I have also tried with the Twenty-fourteen theme to see if it was something with my Lato theme causing the issue. I also tried for the heck of it with the Suffusion theme which I use a lot and that is the only place it works.

For those who don’t know, Suffusion has a custom includes section where you can add custom CSS. So in there when I use this code below, my post titles are displayed in the pacific font just like I would expect.

@font-face {
    font-family: 'pacificoregular';
    src: url('http://www.saratogaaerialphotoandvideo.com/_webfonts/pacifico-webfont.eot');
    src: url('http://www.saratogaaerialphotoandvideo.com/_webfonts/pacifico-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.saratogaaerialphotoandvideo.com/_webfonts/pacifico-webfont.woff2') format('woff2'),
         url('http://www.saratogaaerialphotoandvideo.com/_webfonts/pacifico-webfont.woff') format('woff'),
         url('http://www.saratogaaerialphotoandvideo.com/_webfonts/pacifico-webfont.ttf') format('truetype'),
         url('http://www.saratogaaerialphotoandvideo.com/_webfonts/pacifico-webfont.svg#pacificoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

h1.posttitle {
font-family: 'pacificoregular';
}

However, when I switch to my Lato theme or even the built in Twenty Fourteen theme that comes with WordPress, and put the same exact code in the Edit CSS section under Appearance in WordPress, it does not work.

I have tried turning off all plugins and a few other things to no avail.
The only out of the ordinary things I have done is that my WordPress install is not in the root directory on my server, it is in a sub-directory here http://www.saratogaaerialphotoandvideo.com/aerial_photography_and_video/

and also, as you can see in my css, I am using absolute paths to the fonts. I have tried local paths to, but I am not sure if I did that right. I do know that the absolute paths are correct and should work, because they work with the Suffusion theme.

I have not done anything with the site yet other than try to use some web fonts. It is currently set to the Suffusion theme and the pacifico font is displaying correctly. But when I switch to one of the other themes and move my code to either Lato’s section for custom css or WordPress’s Edit CSS section under Appearance, The font displays as Times and I don’t get any errors when I inspect the page in my web browser….

Any help would be greatly appreciated. Thanks in advance to anyone who might know what’s going on here.

Have a great one!
-Joel.