Using .otf fonts on web browsers

Question

Hello ... I'm working on a website that requires font trials online, the fonts i got are all .otf ... is there anyway i can embed the fonts and get them working on all browsers ??? If not, what other alternatives i have ??

Thanks

Answer 1

If your Font is a free Font, you could convert your Font using for example a onlinefontconverter, but .otf is a good type for using @font-face

@font-face {
font-family: GraublauWeb;
src: url("path-to-the-font-file/GraublauWeb.otf") format("opentype");
}

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

checkout this link to see how it works.

because @font-face is not working in all browsers (IE),read "@font-face in IE: Making Web Fonts Work".

hope this helps

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