CODEWITHSUNDEEP
htmlcssfonts
jdv12
jdv12

Reputation: 171

Font won't render in different browsers

Hey so I'm having a little font trouble. I have this font I'm using for a project, however it will only display correctly in chrome. When I try to switch to a different browser it doesn't show up at all and the default font-type displays. Anything I can do to make sure my font will display in every browser heres the snippet of my code.

#p1{
        position:relative;
        font-family: "Didot HTF";
        font-size:120%;
        top: 300px;
        text-align:center;
        white-space: nowrap;
    }

<div id="p1">
    Content, storytelling and strategy for the multi-screen, multi-channel age 
</div>

Upvotes: 0

Views: 430

Answers (1)

Alex Wilson
Alex Wilson

Reputation: 2419

if you use non-standard fonts in a project I advise you to use @ font-face, it needs to use the service to transfer a default font in web font, web font ready to connect like this

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

Upvotes: 1

Related Questions