CODEWITHSUNDEEP
cssfont-facetruetype
Cobolt
Cobolt

Reputation: 952

CSS @font-face isn't working with Mac font

I can't seem to find the answer I'm looking for. I have an entirely static page, mostly made up of images. The font used to create the images is 'Handwriting-Dakota.ttf' found on any Mac OS X install. I have one dynamic element containing text which i want to give this font to. I have the ttf font in the same directory as my css file. 

@font-face{
 font-family: dakota;
 src: url('dakota.ttf') format('truetype');
}

In an html file with the css file included. <p style="font-family: dakota;">sometext</p>

I can see the rule applied in chrome's inspector but it does not change the appearance. Is what I'm trying to do impossible or am I doing it wrong?

Upvotes: 1

Views: 11137

Answers (3)

polikin
polikin

Reputation: 304

@Cobolt, you can try FontSquirrel. http://www.fontsquirrel.com/fontface/generator.

All you need is .otf or .ttf file. Then, FontSquirrel will make the .svg, .eot, .woff for you and create a css file.

Upvotes: 0

lngs
lngs

Reputation: 698

Use this format

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

To further gain more knowledge about font-face syntax, read Bulletproof @font-face Syntax.

To get all versions of the font. google the "font converter", there will be plenty of font converter services in first page.

Upvotes: 5

Brainfeeder
Brainfeeder

Reputation: 2632

Make sure the url is relative to the css file and not to the webroot.

@font-face{
    font-family: 'dakota';
    src: url('../fonts/dakota.ttf') format('truetype');
}

And you probably should add other types to make sure other browsers can use the font without problems.

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

Upvotes: 0

Related Questions