CSS: using installed fonts

Question

I am trying to use a font that I installed called "Bebas Neue" with dafont.com on my web page. I run Ubuntu and I opened the font in the font viewer and it installed successfully. Now I tried to reference the font, as in my CSS:

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

However, this will show the default font. Am I referring to it correctly or do I need to do more to use this font?

Answer 1

Use the @ font-face method. http://fontsquirrel.com has many free and free to use resources. You can download the font into your generator and it will provide you with a neat kit with files and instructions for the cross browser.

Here is 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 to any element that you want to apply to

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

Answer 2

to try

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

where src is the font path.

put the font in the project folder.

and use it as below

 div { font-family: myFirstFont; }