Ligatures not showing up in Firefox/Chrome

I'm trying to get the ligatures for a webfont I created to show up in Chrome and Firefox and IE; they currently only appear in Safari and iOS.

I'm trying to get the ligatures to appear on a larger site, but for the sake of testing, I create a simple HTML page here: http://partyglamourshop.com/joomla/ligatures.html

1. I created the webfont using fontsquirrel and made sure to include the unicode characters that have the ligatures that I want to appear on the page. I double and triple checked that they are in the woff, eot and svg files.

I cannot for the life of me figure out WHY the ligatures won't appear!

Now HERE'S the fun part. I have the font installed on my computer (OSX Mavericks). If I remove the webfont declaration in my css and adjust the class to call the font as it appears on my computer, the ligatures appear. HELP!

Here's my CSS:

Here's my css stylesheet:

@font-face {
font-family: FoglihtenNo07caltRegular;
src: url('fonts/foglihtenno07calt.eot');
src: url('fonts/foglihtenno07calt.eot') format('embedded-opentype'),
url('fonts/foglihtenno07calt.woff') format('woff'),
url('fonts/foglihtenno07calt.ttf') format('truetype'),
url('fonts/foglihtenno07calt.svg#FoglihtenNo07caltRegular') format('svg');
}

.ligature {
font-family: FoglihtenNo07caltRegular;
font-size: 22px;
text-transform: uppercase;

/* Display Ligatures */
text-rendering: optimizeLegibility;
font-variant-ligatures: common-ligatures;
-moz-font-feature-settings:"liga=1, dlig=1";
-moz-font-feature-settings:"liga", "dlig";
-ms-font-feature-settings:"liga", "dlig";
-o-font-feature-settings:"liga", "dlig";
-webkit-font-feature-settings:"liga", "dlig";
font-feature-settings:"liga", "dlig";

}