@font-face issues

Question

I am having some issues with loading a custom font on a site that I am working on.

Seems to work in Chrome, but that is it...

https://andstones.site-ym.com/

I attach a custom stylesheet,

<link charset="utf-8" type="text/css" href="http://www.korymathewson.com/fonts/styles.css" rel="stylesheet">

and in the stylesheet I write:

@font-face {
    font-family: ChunkFiveRegular;
    src: url('Chunkfive-webfont.eot');
    src: local('☺'), url('Chunkfive-webfont.woff') format('woff'), url('Chunkfive-webfont.ttf') format('truetype'), url('Chunkfive-webfont.svg#webfontb5K2fJwj') format('svg');
    font-weight: normal;
    font-style: normal;
}

Then I call that as a font-family..

h1.fontface {
    font: 60px/68px 'ChunkFiveRegular', Arial, sans-serif;
    letter-spacing: 0;
}

p.style1, #MainMenu {
    font: 18px/27px 'ChunkFiveRegular', Arial, sans-serif !important;
} 

But it still does not show up in firefox or IE ... any help or advice you can lend?

Answer 1

What is 92p? A node or is it meant to be a class? CSS class/id names can't start with a number.

Answer 2

Firefox only allows embedded fonts that are on the SAME DOMAIN as the site requesting it. There is a (sort of) workaround here:

http://openfontlibrary.org/wiki/Web_Font_linking_and_Cross-Origin_Resource_Sharing

You might want to try to use http://www.fontsquirrel.com/ to allow you to have the fonts themselves embedded in the CSS -- very useful!

Hope this helps