How to correctly use webfonts?

I'm trying to configure web fonts to be used from my website.

It works on my computer but that's because I have the font. I uploaded it to one of the free conversions websites which made them a .SVG and .OET etc. for me but it still doesn't seem to be rendering correctly when I view it from chrome on my nexus or chrome from my iphone.

Is it the devices that don't allow webfonts or is it something my end?

Here is the CSS code

.navig {
font-family: 'TrajanPro-Bold';
src: url('http://www.theroyaloaknonington.co.uk/fonts/TrajanPro-Bold.eot');
src: local('TrajanPro-Bold'), url('http://www.theroyaloaknonington.co.uk/fonts/TrajanPro-Bold.woff') format('woff'), url('http://www.theroyaloaknonington.co.uk/fonts/TrajanPro-Bold.ttf') format('truetype'), url('http://www.theroyaloaknonington.co.uk/fonts/TrajanPro-Bold.svg') format('svg');
text-align:center;
font-size:14px;
color:#333333;
font-weight:bold;

The webpage I'm trying to put it on is here http://www.theroyaloaknonington.co.uk/beta/ to be used in the navigation up top.

Solution

First you need to declare the @font-face:

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

Then you can use that font anywhere in your CSS like so:

.navig { font-family: 'TrajanPro-Bold'; }

Obviously in the font-face bit of the CSS, you need all those formats and you need to change the src paths to where your fonts are.

If you use the font generator on Font Squirrel, if generates the CSS for you as well as the correct files types: http://www.fontsquirrel.com/tools/webfont-generator