Using .Otf Fonts on Web Browsers

CSS import fonts from otf

use this;

@font-face {
    font-family: testfont;
    src: url("fonts/test.otf") format("opentype");
}

Add OTF Fonts to Webpage

Here please try replacing this snippet

<h1 face=MagnoliaScript>text</h1>

with this one here :

<h1 style="font-family:MagnoliaScript;">text</h1>

I hope this helps.

Can I use .otf or .ttf extension fonts for @font-face property in CSS?

You can use all font file format like this:

@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 */
}

Using otf file as font for website

1) You have to specify full path or relative path from php script to font file in src: url
2) your browser has to support otf fonts

Font-face not working in IE, otf font

Internet explorer use eot format (legacy) or woff.
See MSDN

Anyway i use this code for maximum compatibility:

@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 */
}

OTF Font on web server?

You'll need to configure the proper MIME types. OTF fonts should have a MIME-type of application/font-sfnt.

Check these links for implementation details:

• http://sebduggan.com/blog/serving-web-fonts-from-iis/
• http://codingstill.com/2013/01/set-mime-types-for-web-fonts-in-iis/

Using OpenType fonts in the browser

The practical way to have your font (a font that you may legally use as a downloadable font) used in browsers is to use a service like FontSquirrel @font-face Generator to create the different font formats needed and to use the CSS code it produces, with discretion (it may need tweaking if you italics, bold, or any other typeface than regular).

Provided that the font originally has ligature definitions in it and that the converter preserves the information (you need to run some tests after conversion), “standard” ligatures will be used by default in modern versions of Firefox. To make Chrome and Safari use them, add the CSS declaration

text-rendering: optimizeLegibility

(to be applied to whatever elements should be rendered with ligatures), and to cover IE 10 as well, also add

-ms-font-feature-settings: "liga";

and just for safety, add the proposed standard setting as well:

font-feature-settings: "liga";

I think this gives you all that you can get now or in the near future.

If the font contains definitions for contextual (clig), discretionary (dlig), or historical (hlig) ligatures, you can enable them on some browsers. For example, the following enables discretionary ligatures in addition to standard ligatures:

-ms-font-feature-settings: "liga", "dlig";
-webkit-font-feature-settings: "liga", "dlig";
-moz-font-feature-settings: "liga", "dlig";
font-feature-settings: "liga", "dlig";

You can test these using the Google web font Source Sans Pro, which has standard ligatures for “ff” and “ft” (distinguishable from non-ligature rendering at least in sufficiently large font size).

Regarding the theory, OpenType is a specification and a font format, which allows typographic information embedded into font files, among other things. Browsers may support the format without supporting the use of the embedded information.

---

Related Topics