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?

Solution 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> 

Solution 2

try

@font-face
{
font-family: myFirstFont;
src: url('Bebas Neue.ttf'),
     url('Bebas Neue.eot'); /* IE9 */
}

where src is path to the font.

put font into your project folder.

and use that as below,

div
{
    font-family: myFirstFont;
}

Comments

[Danny Beckett]

Possible duplicates: stackoverflow.com/q/220236/1563422 and stackoverflow.com/q/107936/1563422

[Dipesh Parmar]

used font-face for that..?

[gillytech]

Are you trying to embed this font for others on the web to see or only on your computer? As far as I know, the only way to do this is by embedding the font. I use the @font-face method in CSS. fontsquirrel.com provides free kits and instructions for this... will save you a lot of time an headache

[Shannon Rothe]

Excellent! Thank you :)

[Shannon Rothe]

Yes! That's exactly what I needed. :)