6

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?

Shannon Rothe
  • 1,112
  • 5
  • 15
  • 26
  • Possible duplicates: http://stackoverflow.com/q/220236/1563422 and http://stackoverflow.com/q/107936/1563422 – Danny Beckett Mar 04 '13 at 05:50
  • 1
    used font-face for that..? – Dipesh Parmar Mar 04 '13 at 05:50
  • 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. http://fontsquirrel.com provides free kits and instructions for this... will save you a lot of time an headache – gillytech Mar 04 '13 at 05:52

2 Answers2

8

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>
gillytech
  • 3,595
  • 2
  • 27
  • 44
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;
}
Dipesh Parmar
  • 27,090
  • 8
  • 61
  • 90