Using .otf fonts on web browsers [html]


From the Google Font Directory examples:

@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url('') 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:


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 ?

Why are you including the font path twice?

Try including it once:

@font-face {
    font-family: 'Novecentosanswide-DemiBold'; 
    src: url("/wp-content/themes/test/fonts/Novecentosanswide-DemiBold.otf") format("opentype");
    font-style: normal;

Also, the font-family and path are different. Font family is Novecentowide-DemiBold and font path is Novecentosanswide-DemiBold. These should be the same. I fixed it for you in the above CSS, assuming the Novecentosanswide-DemiBold is the correct path and not the other one.

You may also need to add a MIME type to your page:

      <mimeMap fileExtension=".otf" mimeType="font/opentype" />

Can't seem to change font type

Try to use all the types, like .otf, .eot, .ttf etc. Add this types to your css file.

Few of the types are not supported in different browsers. Look into

Look into the below code how we can add all the formats required to work on different browsers. Reference from

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

Also refer this link for more information (similar problems), Using .otf fonts on web browsers