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 try implementing your OTF font using @font-face like this:

@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");

}

But, if you want to support a wide variety of modern browsers then you can switch to WOFF and TTF font types. WOFF type can be 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, then you can convert your font using, for example, a onlinefontconverter.

@font-face {

    font-family: GraublauWeb;

    src: url("path/GraublauWebBold.woff") format("woff"), url("path/GraublauWebBold.ttf")  format("truetype");

}

But, if you want to support every browser that is still out there (not necessary anymore IMHO), then you can 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 */

}

To get a detailed view of which file-types are supported by which browsers, you can refer to these docs:

@font-face Browser Support

EOT Browser Support

WOFF Browser Support

TTF Browser Support

SVG-Fonts Browser Support