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 ?

Deciduous

Maybe javascript should be removed from the tag list here? – Grays

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

Diseur

It worked perfectly fine on almost all browsers ... The only browser that didn't work is FireFox Linux ... Any suggestion for that one ?? – Deciduous

Note that if you're hosting this on a Windows server, you must add the .otf filetype as a valid and served filetype. The only way to see that this is the problem is to follow the link to the font (404 error if so). You can temporarily rename to .ttf or even .html for testing. The only web fonts supported by IE is WOFF format. (Nope, never heard of it either!) – Lashawnda

Hey, how about the performanc of this type of font? Is it good? Or other is better? – Mastaba

Are there quotes (") missing in the code examples? – Stillmann

No, it should work. I mixed single- and double-quotes, fixed that. – Diseur

@Diseur Can you update your answer to the state of the matter in 2017, if there is any modification? Or do you think is it still valid today? You don't need to modify your answer, just add an update section at the bottom of it. As this answer is a top answer, I think the community would be very grateful:) – Dialyze

@Diseur Sorry, I've just noticed that you have edited your answer in April. So, it seems to be updated:) Thank you! – Dialyze

Seems like otf should work almost across the board now caniuse.com/#search=otf – Gers

This is a better converter for bulk files: transfonter.org – Knickknack

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

Grays