How to include .otf in css?

Question

Im trying to include font in css but without success. In console im getting error in console. But when i include another font with .ttf extension its working. Any suggestion?

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

Duplicate of http://stackoverflow.com/questions/3245141/using-otf-fonts-on-web-browsers — amespower, Dec 11 '15 at 15:21

Philip Feldmann · Accepted Answer · 2015-12-11T15:38:22.437

10

If you are using an open font you can try using a converter like this one: http://www.fontsquirrel.com/tools/webfont-generator Binding several file formats to the font-face is recommended since not every browser supports every single format by default: (According to Font Sqirrel)

TTF Works in most browsers except IE and iPhone.
EOT IE only.
WOFF Compressed, emerging standard.
SVG iPhone/iPad.

edited Dec 11 '15 at 15:38

answered Dec 11 '15 at 15:24

Philip Feldmann

7,887
6
41
65

[According to caniuse.com](https://caniuse.com/?search=truetype), TTF has been supported on Safari and Chrome for iOS since March of 2011. – swinn Jan 28 '22 at 19:28

Android Bro · Answer 2 · 2015-12-11T15:33:05.413

2

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:

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

edited Dec 11 '15 at 15:33

answered Dec 11 '15 at 15:22

Android Bro

43
9

i tried this but i get an error in console ....and when i try to open that file i get this in browser:"he page you are requesting cannot be served because of the extension configuration. If the page is a script, add a handler. If the file should be downloaded, add a MIME map." – None Dec 11 '15 at 15:26
See my updated answer with a MIME type for your OTF fonts. – Android Bro Dec 11 '15 at 15:33

How to include .otf in css?

2 Answers2