493

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 ?

Rod
  • 44,422
  • 3
  • 32
  • 51
Naruto
  • 5,388
  • 4
  • 16
  • 24

2 Answers2

866

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

hope this helps

choise
  • 22,226
  • 19
  • 72
  • 127
  • 1
    It worked perfectly fine on almost all browsers ... The only browser that didn't work is FireFox Linux ... Any suggestion for that one ?? – Naruto Jul 14 '10 at 11:28
  • 4
    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!) – Henrik Erlandsson Oct 28 '13 at 11:37
  • Hey, how about the performanc of this type of font? Is it good? Or other is better? – Anggie Aziz Dec 04 '13 at 10:09
  • Are there quotes (`"`) missing in the code examples? – steffen Apr 15 '17 at 19:38
  • No, it should work. I mixed single- and double-quotes, fixed that. – choise Apr 24 '17 at 12:03
  • @choise 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:) – viery365 Dec 04 '17 at 11:24
  • @choise Sorry, I've just noticed that you have edited your answer in April. So, it seems to be updated:) Thank you! – viery365 Dec 04 '17 at 11:26
  • 2
    Seems like otf should work almost across the board now https://caniuse.com/#search=otf – Stephen Mar 26 '19 at 19:52
  • This is a better converter for bulk files: https://transfonter.org/ – Harshal Parekh Jan 19 '21 at 01:31
  • 1
    @HarshalParekh thanks. updated. – choise Feb 02 '21 at 10:07
55

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:

kzh
  • 17,642
  • 10
  • 68
  • 95