Most modern browsers support the @font-face
rule, but not all with the same format. There is a more comprehensive @font-face
declaration that includes all of the formats for all of the browsers (although everything appears to be heading in the woff direction, include them all just to be sure, and you didn't mention the browser you were having the issue with)
Some thing like this
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
Reference here
If you don't have the other formats, sites like Font Squirrel can help out there (please respect font licences), they have a webfont generator
Another possible issue, is make sure that the path is correct, in relation to the file that the path is in. i.e. if it is in the HTML file, the path needs to relative to the HTML file, but if it is in an external stylesheet, it needs to be relative to the stylesheet. You could of course just use an absolute path (i.e. starts with a /
and the full path to the font file). Now based on your code above, the font file (sansation_light.woff
) must be located in the same directory as that html file. (checking developer tools can be helpful here, to see the path the browser is requesting the file from. If it fails, you'll get a 404 on the file)
Now if this still doesn't solve your issue, then it may be something to do with your webserver. Sometimes they are not set up correctly to serve the Font formats (and you get a 404 or the like error, again check the developer tools for errors downloading font files), so you may need to add mimetype support for them at the webserver level too.