Embed Font

Posted on 26/11/2010 15:54:09

Hello

I need to embed a custom font on a solution, but i can't seem to get the path right. I have put the font in a map called 'fonts' under the design (files/Templates/Designs/[MyDesign]/fonts/[MyFont.otf])

Can you help me with a solution?

Thank you

/Iben Louise

Replies

Posted on 26/11/2010 19:24:25

Hello :)

This path should work:

url(/files/Templates/Designs/[MyDesign]/fonts/[MyFont.otf])

You probalbly also need access to the server and register the MIME types for fonts in IIS.

Here are some MIME types you can use...

Embedded OpenType (.eot): application/vnd.ms-fontobject

OpenType (.otf): font/otf

TrueType (.ttf): font/ttf

Web Open Font Format (.woff): font/woff

Scalable Vector Graphics (.svg) – image/svg+xml

More about using @font-face:

http://www.w3.org/TR/css3-webfonts/#the-font-face-rule

http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

/Morten

Posted on 06/12/2010 09:31:43

Thank you for the answer. I will try what you suggest :)

/Iben Louise

Posted on 13/12/2010 15:00:01

I have now done as suggested in the above. At it works very well - except in IE (surprise!). Does anyone has a way to make the implemented font show in IE as well?

/Iben Louise

Posted on 13/12/2010 15:07:05

Cufon is the one and only, performance- and browsersafe solution, if you ask me:
http://cufon.shoqolate.com/generate/

Posted on 13/12/2010 15:23:01

Did you follow the recommendations given by Paul Irish?
http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

You have to add a .eot version of the font for IE...

@font-face {

font-family: 'Graublau Web';

src: url('GraublauWeb.eot');

src: local('☺'),

url('GraublauWeb.otf') format('opentype');

}

Just replace the font with your actual font. Do not change the order of rules in the CSS - the order is very important.

You do not need to load some bloated javascript API to use fonts :)

/Morten

You must be logged in to post in the forum

Developer forum

Embed Font

Replies