CSS: Using installed fonts

Question

I'm trying to use a font I installed called "Bebas Neue" from dafont.com on my web page. I am running Ubuntu and I opened the font in font viewer and it successfully installed. Now I have tried referencing the font like so in my CSS:

font-family: 'Bebas Neue', sans-serif;

However this is displaying the default font still. Am I referencing it correctly or do I need to do more to use this font?

Answer 1

Use the @font-face method. http://fontsquirrel.com has a lot of free and free-for-commercial use resources on this. You can upload a font into their generator and it will give you a neat kit with cross-browser font files and instructions.

Here's an example:

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

}

And then reference this on whatever element you want to apply this to

<style type="text/css">
div {
    font-family: OpenSansLight;
}
</style>


<div>
    This is OpenSansLight!
</div>