@font-face Not Working on Other Computers

I've been working on my first HTML5/CSS3 site, and it's been going well for the most part. Totally loving the new @f开发者_StackOverflowont-face property, and it works perfectly on my machine. The problem I'm having is when previewed on another device (computer, ipad, iphone), it doesn't seem to be recognising the @font-face property and uses the fallback font instead.

Site link: http://williamben.com/

Here's the CSS I'm using:

@font-face { font-family: 'League Gothic';
             src: url('_/type/league_gothic.otf') format('otf');
}

Any help would be appreciated.

Thanks in advance.

It is working on your computer as you have the font installed. If you disable the fonts it will not work. It is a common mistake using web fonts as most fonts people use as web fonts they also have installed, so if the web font declaration is wrong, they don't spot it.

It looks like the reason is because you are pointing to a font that doesn't exist, or you have the path wrong. http://williamben.com/_/type/league_gothic.otf doesn't exist.

Agree with dstorey. Also, maybe check out font squirrel to get more coverage: http://www.fontsquirrel.com/fontface/generator

From the looms of things the file path may be wrong. But youll still want to use the fontsquirrel generator because it will give you a few more lines of code that ensure the font works in near every browser. Then has a fallback to a basic font stack if all else fails.