Question

I have just brought a web fontface to use for the first time. I have uploaded it our testing server and it works on all the machines in the office except for one laptop.

After discovering that laptop didn’t work, I did a test on crossbrowsertesting.com across all platforms and discovered it wasn’t appearing on any of them.

I then uploaded the mywebsfontkit folder with the instructions of how to install the webfont to my server and did another crossbrowser check and discovered that font started to work on some of the browsers yet when I try put it into my own page it fails.

I have tried several ways to make it work.
1 – I put the full url path to the font in – nothing happened
2 – I have put the webfonts in the root folder as well as root folder of my server
3 – I have tried calling the font museo in different ways i.e font-family: ‘Museo’ or font-family: ‘Museo-700’.

In the sample I am posting you will see that for the nav I call museo as museo-700 and that now on my machine calls arial instead and on the text in the header I am calling museo as font-family: ‘Museo’. I understand that the font it won’t work on all browsers but I can’t figure out why it will work in one file and not the other.

I have also added in to my .htaccess file
AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

The style sheet that holds the fonts is been called as follows

  <link rel="stylesheet" type="text/css" href="css/type.css" />

the stylesheet that has the fonts

 @font-face {font-family: 'Museo-900';src: url('webfonts/23C024_0_0.eot');src: url('webfonts/23C024_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/23C024_0_0.woff') format('woff'),url('webfonts/23C024_0_0.ttf') format('truetype');}


 @font-face {font-family: 'Museo-700';src: url('webfonts/23C024_1_0.eot');src: url('webfonts/23C024_1_0.eot?#iefix') format('embedded-opentype'),url('webfonts/23C024_1_0.woff') format('woff'),url('webfonts/23C024_1_0.ttf') format('truetype');}


 @font-face {font-family: 'Museo-500';src: url('webfonts/23C024_2_0.eot');src: url('webfonts/23C024_2_0.eot?#iefix') format('embedded-opentype'),url('webfonts/23C024_2_0.woff') format('woff'),url('webfonts/23C024_2_0.ttf') format('truetype');}

and how i am calling the font for the nav and header

    #nav ul li {
float: left;
position: relative;
color:#000;
font-family: 'Museo-700', Arial, sans-serif;
font-size: 12px;
font-weight: normal;
}

    .title-900 {
font-family: 'Museo-900', Arial, sans-serif !important;
font-weight: normal;
font-size:18px;
line-height:20px;
color:#9BC255;
padding-bottom:10px;
}

Answer 1

In the @font-face sections you have called the the loaded fonts Museo-900, Museo-700, Museo-500 and you must use the same font family in the regular directives, like:

font-family: "Museo-900", Arial, sans-serif !important;

Other than this, I cannot see anything else in your sandbox that might cause such a problem.