Using a specific font in html and css

Question

I have a code in html and css. I want to use a special font I've downloaded and after searching some, I wrote the code below:

    <head>
        <style>
        @font-face
        {
            font-family: paraaminobenzoic;
            src: url('paraaminobenzoic.otf');
        }
        p.custom_font {font-family: paraaminobenzoic;}
        </style>
    </head>

and it doesn't work and I don't know why. especially I don't know whether I added the code below in the right position or not.

p.custom_font {font-family: paraaminobenzoic;}

can anyone help noticing the problem?

@JTFRage thanks. :) I'd not seen that link on SO. it helped and got to be right. :) — Melika Barzegaran, Dec 12 '13 at 15:10

score 3 · Answer 1 · answered Dec 12 '13 at 15:06

3

the correct format for font face should be:

@font-face{ 
font-family: 'MyWebFont';
src: url('WebFont.eot');
src: url('WebFont.eot?iefix') format('eot'),
     url('WebFont.woff') format('woff'),
     url('WebFont.ttf') format('truetype'),
     url('WebFont.svg#webfont') format('svg');
}

TTF - Works in most browsers except IE and iPhone.

EOT - IE only.

WOFF - Compressed, emerging standard.

SVG - iPhone/iPad.

Take a look here: http://www.fontspring.com/support/installing_webfonts/how-do-i-use-the-webfonts

answered Dec 12 '13 at 15:06

wf4

3,727
2
34
45

Actually, .svg is only required for iOS 5 and earlier. – KaptajnKold Dec 12 '13 at 15:09
@wf4 thanks for mentioning these details. I didn't know about them. :) – Melika Barzegaran Dec 12 '13 at 15:13

score 2 · Answer 2 · answered Dec 12 '13 at 15:06

Try adding quotes in the following manner -

<head>
    <style>
    @font-face {
        font-family: "paraaminobenzoic";
        src: url("paraaminobenzoic.otf");
    }
    p.custom_font {
        font-family: "paraaminobenzoic";
    }
    </style>
</head>

Using a specific font in html and css

2 Answers2