4

I have been told to create a website using a non standard font. The client has supplied the font file (in the .otf format). Is there any way I can have the text on the webpage show up in the specified font (non-web standard) ?

Is there any other alternative other than using sIFR ?

EDIT : How do i apply this @font-face only to a particular div ?

YD8877
  • 10,401
  • 20
  • 64
  • 92
  • possible duplicate of [Is @font-face usable now?](http://stackoverflow.com/questions/2219916/is-font-face-usable-now) and [this](http://stackoverflow.com/questions/107936/how-to-add-some-non-standard-font-to-website), [this](http://stackoverflow.com/questions/1838295/custom-font-and-a-cms), [this](http://stackoverflow.com/questions/2180029/font-face-in-css-is-it-ok), [this](http://stackoverflow.com/questions/7512468/using-a-custom-ttf-font-in-css), [this](http://stackoverflow.com/questions/5985097/custom-font-via-css) and many others. – Quentin Oct 10 '11 at 19:38

4 Answers4

10

You can use the CSS @font-face declaration for this.

However, beware: not all browsers support the otf format.
You can use a tool such as FontSquirrel's Font-face Generator to convert the font into all the different formats you'll need. It'll even generate the CSS for you, which you'll then simply copy and paste into your project.

Joseph Silber
  • 214,931
  • 59
  • 362
  • 292
  • 3
    Your answer was mostly better than mine so I merged them and deleted mine :). +1 – Domenic Oct 10 '11 at 19:40
  • How do i apply this font-face only to a particular div ? – YD8877 Oct 10 '11 at 20:20
  • The @font-face declaration does not apply the font to your page at all. You need the @font-face declaration so that the font is available for you to use in your page. You can then apply the font to your div via the regular CSS `font-family` property. If you're using FontSquirrel's Generator, you should have a sample page included with the download... – Joseph Silber Oct 10 '11 at 20:23
2

Not 100% supported, but:

@font-face {
    font-family: MyFont;
    src: url('MyFont.otf');
}
Dan
  • 584
  • 5
  • 9
0

CSS 3 has given browsers the ability to download and use TTF file formats. As usual IE gives partial support. As usual, Google to the rescue.

http://code.google.com/apis/webfonts/docs/getting_started.html

pb2q
  • 58,613
  • 19
  • 146
  • 147
Gaurav Ramanan
  • 3,655
  • 2
  • 21
  • 29
0

Alternatively, you could use Cufon font replacement:

http://cufon.shoqolate.com/generate/

It does have some drawbacks however: text can't be copied and it uses javascript which may be a problem in some very old browsers of if someone is browsing with js turned off.

Madalin Craciun
  • 36
  • 1
  • 1
  • 4
  • This was an option in 2011 but today all browsers support @font-face. You still need to convert an OTF font to WOFF though. – sbaechler Sep 30 '16 at 08:46