Using Adobe fonts on the web

Question

Hey everyone, I have a website that i want to use Adobe fonts on it. can anyone please help with it ??? the files i got are .otf

Many thanks

Be careful and check whether your font license permits this. Related: http://www.adobe.com/aboutadobe/antipiracy/fonts.html — Pekka, Oct 12 '10 at 14:33
Other than that, see http://stackoverflow.com/questions/220236/how-to-embed-fonts-in-html (the answer with 26 upvotes) — Pekka, Oct 12 '10 at 14:35

score 2 · Answer 1 · answered Oct 12 '10 at 14:35

2

You can use OTF fonts in browsers that supports @font-face. Be aware of the licensing of your font, however.

Example from the link above:

@font-face 
{
    font-family: Delicious;
    src: url('Delicious-Roman.otf');
}

h3 { font-family: Delicious, sans-serif; }

answered Oct 12 '10 at 14:35

Tim S. Van Haren

According to the article, that is Safari 3.1 only. A bit slim, isn't it? Are there any more up-to-dates about browsers which support this? – Pekka Oct 12 '10 at 14:36
1

The article is slightly dated, but viewing their example in Opera 10.54, Firefox 3.6.9, Safari 5.0.2, and Chrome 6.0 all worked perfectly. IE7 and IE8 did not seem to work, though. – Tim S. Van Haren Oct 12 '10 at 14:43
1

The following article says that IE supports only TrueType fonts converted to Embedded OpenType: http://webfonts.info/wiki/index.php?title=%40font-face_support_in_Internet_Explorer. Perhaps you could convert the OTF font to EOT? – Tim S. Van Haren Oct 12 '10 at 14:45

score 1 · Accepted Answer · answered Oct 12 '10 at 14:35

1

@font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }

@font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf'); }

h3 { font-family: Delicious, sans-serif; }

I use it to use dot-matrix fonts here

answered Oct 12 '10 at 14:35

FatherStorm

Any that fully support CSS3. so that means Firefox 3.5+, Chrome and IE9 for sure, but not IE8 and unsure about Safari on PC or Opera – FatherStorm Oct 13 '10 at 12:44
If you absolutely need to use a different font, there are Javascript libraries that will use a bit of flash magic to replace given page elements with a swf rendered replacement... – FatherStorm Oct 13 '10 at 12:45

score 0 · Answer 3 · answered Oct 12 '10 at 15:38

To embed a font I would recommend Paul Irish's Bulletproof @font-face syntax

@font-face {
  font-family: 'adobe font web';
  src: url('adobefont.eot');
  src: local('?'),
         url('adobefont.otf') format('opentype');
}

I think that it is important to note that Adobe fonts are under licence so you can't just use them for free on the web. If you do wish to use Adobe fonts I would recommend getting an account at http://typekit.com/ or seek a free alternative http://www.theleagueofmoveabletype.com/ or http://code.google.com/webfonts

3 Answers3