Using .otf fonts on web browsers

Question

I'm working on a website that requires font trials online, the fonts I have are all .otf

Is there a way to embed the fonts and get them working on all browsers?

If not, what other alternatives do I have ?

Answer 1

You can implement your OTF font using @font-face like:

@font-face {     font-family: GraublauWeb;     src: url("path/GraublauWeb.otf") format("opentype"); }  @font-face {     font-family: GraublauWeb;     font-weight: bold;     src: url("path/GraublauWebBold.otf") format("opentype"); } 

// Edit: OTF now works in most browsers, see comments

However if you want to support a wide variety of browsers i would recommend you to switch to WOFF and TTF font types. WOFF type is implemented by every major desktop browser, while the TTF type is a fallback for older Safari, Android and iOS browsers. If your font is a free font, you could convert your font using for example a transfonter.

@font-face {     font-family: GraublauWeb;     src: url("path/GraublauWebBold.woff") format("woff"), url("path/GraublauWebBold.ttf")  format("truetype"); } 

If you want to support nearly every browser that is still out there (not necessary anymore IMHO), you should add some more font-types like:

@font-face {     font-family: GraublauWeb;     src: url("webfont.eot"); /* IE9 Compat Modes */     src: url("webfont.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */          url("webfont.woff") format("woff"), /* Modern Browsers */          url("webfont.ttf")  format("truetype"), /* Safari, Android, iOS */          url("webfont.svg#svgFontName") format("svg"); /* Legacy iOS */ } 

You can read more about why all these types are implemented and their hacks here. To get a detailed view of which file-types are supported by which browsers, see:

@font-face Browser Support

EOT Browser Support

WOFF Browser Support

TTF Browser Support

SVG-Fonts Browser Support

Answer 2

From the Google Font Directory examples:

@font-face {   font-family: 'Tangerine';   font-style: normal;   font-weight: normal;   src: local('Tangerine'), url('http://example.com/tangerine.ttf') format('truetype'); } body {   font-family: 'Tangerine', serif;   font-size: 48px; } 

This works cross browser with .ttf, I believe it may work with .otf. (Wikipedia says .otf is mostly backwards compatible with .ttf) If not, you can convert the .otf to .ttf

Here are some good sites:

• Good primer:

  http://www.alistapart.com/articles/cssatten

• Other Info:

  http://randsco.com/index.php/2009/07/04/p680