CODEWITHSUNDEEP
cssfontsfont-facesrc
Michael Naidis
Michael Naidis

Reputation: 124

Font SRC doesn't work in HTML/CSS

I am trying to use an external font which is located in the main site folder (erbosdraco_nova_nbp.ttf) but it doesn't work and shows the default html font.

@font-face

{
font-family: "fontFlightboard";
src: url('templates/erbosdraco_nova_nbp.ttf')
    ,url('Sansation_Light.eot'); /* IE9 */
}


#loginaccess {
    width:450px;
    height:200px;
    background-color:#F3F3F3;
    float:center;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    text-align:left;
    font-family:"fontFlightboard";
}

Thanks.

Upvotes: 1

Views: 2295

Answers (3)

xan
xan

Reputation: 4696

First, you'll have to convert your fonts into required formats like eot, ttf, svg, etc. You can go to this link to convert fonts from one type to another: http://www.fontsquirrel.com/fontface/generator

Finally, include this code as the first thing in your CSS file: 

`@font-face {
    font-family: 'JosefinSlab';
    src: url(../JosefinSlab-SemiBold.eot);
    src: url(../JosefinSlab-SemiBold.ttf) format('truetype'),
         url(../JosefinSlab-SemiBold.svg) format('svg'); 
}`

Make sure that the path of the font files are correct.

Upvotes: 1

Idrizi.A
Idrizi.A

Reputation: 12060

Try this way

@font-face{
font-family: fontFlightboard;
src: url('templates/erbosdraco_nova_nbp.ttf'),
     url('Sansation_Light.eot'); /* IE9 */
}

Upvotes: 0

Kurt Emch
Kurt Emch

Reputation: 529

I would first suggest generating a Fontface kit from somewhere like Font Squirrel because it includes all the formats you'll need, then seeing if that fixes your problem.

http://www.fontsquirrel.com/fontface/generator

Upvotes: 0

Related Questions