Add a font to a website

Question

I am trying to add this font : http://www.fonts2u.com/vps-dong-da-hoa.font

to my website. Here is my CSS :

@font-face {
font-family: "VPSDODAH";
src: url(http://localhost/blablabla/wp-content/plugins/buddypress/bp-themes/frisco-for-buddypress/VPSDODAH.ttf) format("truetype");}

#header h1 a {
font-family: "VPSDODAH";}

The URL to the font is correct but it's not working, what can it be ?

Thank you very much.

Answer 1

Not all browser support .ttf. Use a font generator to get all the font types ( I use font2web ) and then just add the fonts via @font-face:

@font-face {
    font-family: 'fontName';
    src: url('../fonts/fontName.eot');
    src: url('../fonts/fontName.eot?iefix') format('eot'),
         url('../fonts/fontName.woff') format('woff'),
         url('../fonts/fontName.ttf') format('truetype'),
         url('../fonts/fontName.svg#fontName') format('svg');
    font-weight: normal;
    font-style: normal;
 }

Read here about browser font support.

Answer 2

You can try this website for your web font generation. If your font exists, you can convert it and get all the @font-face parameters to apply it for your website.