The font I installed (@font-face) is not working across all browsers - only Chrome

Question

I installed a font to the site but it will only show on Chrome (I checked on Firefox and Explorer). I dont know if I am missing something in the coding?

Font Face

@font-face {
font-family: 'octin_sports_freeregular';
src: url('octinsports-webfont.eot');
src: url('octinsports-webfont.eot?#iefix') format('embedded-opentype'),
     url('octinsports-webfont.woff') format('woff'),
     url('octinsports-webfont.ttf') format('truetype'),
     url('octinsports-webfont.svg#octin_sports_freeregular') format('svg');
font-weight: normal;
font-style: normal;

}

Then in the HTML:

<link rel="stylesheet" href="http://weareprodigy.co/stylesheet.css" type="text/css"     charset="utf-8">

And in the headings:

h1 {

font-size: 32px;
font-size: 2.25rem;
font-family: 'octin_sports_freeregular', Impact, Charcoal, sans-serif;
text-shadow: 2px 4px 3px rgba(0,0,0,0.7);
}


h2 {
font-size: 28px;
font-size: 1.875rem;
font-family: 'octin_sports_freeregular', Impact, Charcoal, sans-serif;
color: #8CC63E;
-webkit-text-stroke-width: .5px;
-webkit-text-stroke-color: black;
}

Link: www.weareprodigy.co

Answer 1

Each browser uses a different way of loading in the font, some use the EOT file, some use the WOFF file.

You currently only have the EOT file uploaded to the server and chrome uses the EOT file but IE & Firefox will use one of the other two formats.

You will need to make sure that the files are uploaded in the correct place and that within your CSS, you are linking to the correct place.

EDIT

Just had a look through your CSS. Theres no need to have the additional style.css at root level because in the actual theme, the fonts are already been called in. My guess is that the fonts have been put at the root level and not within the theme folder.

EDIT 2

Change your themes style.css file (wp-content/themes/epik/style.css) to show this

@font-face {
font-family: 'octin_sports_freeregular';
src: url('../../../octinsports-webfont.eot');
src: url('../../../octinsports-webfont.eot?#iefix') format('embedded-opentype'),
     url('../../../octinsports-webfont.woff') format('woff'),
     url('../../../octinsports-webfont.ttf') format('truetype'),
     url('../../../octinsports-webfont.svg#octin_sports_freeregular') format('svg');
font-weight: normal;
font-style: normal;
}

Since the fonts are in the root, that should direct to the root file as the css is looking for the fonts in the epik theme folder atm.