Issue with unique font names, are scripts required?

Question

trying to change my header 1's font to ballpark Weiner.

Below is my css:

h1 {color: #000000; font-family: Ballpark Weiner; 
        font-size: 40px;
}

Trying to get the font to look like this:

http://www.fontgirl.com/info/ballpark.php

It ends up looking like a Arial type of font. For unqiue fonts like this, are there scripts required to be inserted? If a screen shot is needed for current font please let me know.

Answer 1

I took a look at the link you provided, and this is how you should to it.

Go to fontsquirrel and upload your BALLW___.TTF file, and it will generate the other font extensions that you need + the fontface rules the font-face rules would look something like:

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

include that in your css file then you can use that like this

css selector
{
font-family: 'fontname';
}

ps: dont forget to upload your fonts

Answer 2

Modify this code to work with your font and add it to your CSS file.

@font-face {
    font-family: cool_font;
    src: url('cool_font.ttf'); // link to the font
}

then when you want to use it just do this

p.custom_font {
    font-family: cool_font; // no .ttf
}