CODEWITHSUNDEEP
htmlcss
Ser Pounce
Ser Pounce

Reputation: 14527

can't get @font-face to work

I'm trying to put a custom font on my website. On my CSS page I have:

body
{
    font-family: HurmeGeometricSans4_SemiBold;
}

@font-face
{
    font-family: HurmeGeometricSans4_SemiBold;
    src: url(resources/Hurme_Design_-_HurmeGeometricSans4_SemiBold.otf);
}

The file is initially named "Hurme Design - HurmeGeometricSans4 SemiBold" and I bought it with a web license from myfonts.com. The resources directory is in the same directory that my style sheet sits in. Can anyone see what I'm doing here that might be wrong? Have tried a lot but can't get it to work. This is to be used on mobile safari mainly.

Upvotes: 0

Views: 198

Answers (3)

Marcel
Marcel

Reputation: 1288

If the CSS is in the same directory as the font forget about adding the subdirectory, in your case resources/. It will read as resources/resources/font instead of the required resources/font.

Whenever in doubt, use the complete URL (ex. http://www.yourdomain.com/path-to-font/font)

Upvotes: 1

WhiteLine
WhiteLine

Reputation: 1991

try this

CSS

@font-face
{
    font-family: myCustomFont;
    src: url(sansation_light.woff);
}

div
{
  font-family:myCustomFont;
}

HTML

<div>test custom font</div>

UPDATE : (with an html page and the font in the same directory)

<html>

<head>

<style>

@font-face
{
    font-family: myCustomFont;
     src: url(elephant.ttf);
}

div
{
 font-family:myCustomFont;
}

</style>


</head>




<body>

<div>custom font</div>
default font

</body>



</html>

enter image description here

Upvotes: 0

blue
blue

Reputation: 1949

Try adding format hint format("opentype") like this:

    body
    {
        font-family: HurmeGeometricSans4_SemiBold;
    }

    @font-face
    {
        font-family: HurmeGeometricSans4_SemiBold;
        src: url(resources/Hurme_Design_-_HurmeGeometricSans4_SemiBold.otf) format("opentype");
    }

Also, the @font-face has some browser issues - you can check a browser comaptibility chart e.g. here: http://everythingfonts.com/font-face#idTab3

You may also use an online font converter and have the font converted to multiple formats and use the generated css.

Upvotes: 0

Related Questions