37

I need to include a font (OpenSymbol) in a html file and the font file is in a local folder (I know the exact absolute path to it). If I use @font-face like this:

@font-face {
  font-family: "OpenSymbol";
  src: url("<absolutePath>/OpenSymbol.ttf") format("truetype");
}

It works in Chrome, Opera and Safari, but not in Firefox neither IE9. Other @font-face usage works perfectly fine in all browsers.

Btw, in Chrome, I get a warning:

Resource interpreted as Font but transferred with MIME type application/octet-stream

What can I do to cleanly include a locally stored font which is not installed on the OS?

Edit:

I found out that the listing of different urls seems not to work! Chrome loads the font if I put the [...].ttf url in the first place, but not if it's somewhere else!

2nd Edit:

I got it to work in all browsers except firefox:

@font-face { 
  font-family: 'OpenSymbol';
  src: url('file:<path>/openSymbol.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face { 
  font-family: 'OpenSymbolEOT';
  src: url('file:<path>/openSymbol.eot') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}
...

and then

.element {
  font-family: OpenType, OpenTypeEOT, [...];
}

Anyway, it does work in IE but not in eclipse, which uses IE's rendering engine... o.O

Btw, firefox has problems because of security issues: See here

Community
  • 1
  • 1
Cedric Reichenbach
  • 8,970
  • 6
  • 54
  • 89
  • What exactly do you mean by "local" file? A local URL on the user's file system? – Pekka Aug 04 '12 at 21:26
  • That warning doesn't have much bearing, as far as I know (if I'm wrong please tell me). It just means that the server the font was called from sent incorrect headers with the font. As far as I know, the only thing you can do is edit server settings to change the headers it sends out for .otf files (I believe that is the extension). As long as the font displays correctly, then from experience its not a big deal. – Greg Rozmarynowycz Aug 04 '12 at 21:28
  • @Pekka: Yes, exactly. For example (on Windows): `file:/C:/path/to/folder/openSymbol.ttf` – Cedric Reichenbach Aug 04 '12 at 21:30
  • If the user has the font, then there is no reason to use @ font-face, and if they don't then your CSS wont work. Also IE 9 needs a special implementation of @ font-face, I think that fonts loaded in IE must be .eot. – Greg Rozmarynowycz Aug 04 '12 at 21:32
  • No, the user does not have the font! It's used in an eclipse plugin with html interface, and the font file is part of the plugin. I tried the thing with `.eot?`, didn't help... :( – Cedric Reichenbach Aug 04 '12 at 21:40
  • Using a path relative to your css won't work? Assuming that both css and fonts are local, relative paths should work - url('../fonts/myFont.ttf)... – rafaelbiten Aug 04 '12 at 23:41

3 Answers3

21

You just need one font file in web open font format. Go to http://www.fontconverter.org to convert your OpenSymbol.tff to OpenSymbol.woff. I am a cross-platform developer and i tested this works okay on:

  1. Safari 10.1 and Firefox 52.0.2 on macOS 10.12.4 (iMac)
  2. Internet Explorer 11.0 and Firefox 52.0.1 and Google Chrome 52.0 and Opera 53.0 on Windows 7 (PC)
  3. Safari on iOS 10.3.1 (iPhone)
  4. Chrome 57.0 and Asus Browser 2.0.3 on Android 5.0.2 (Asus tablet)

This goes in the css:

/* Add the decaration on top */
@font-face { 
font-family: 'OpenSymbol';
src: url('font/OpenSymbol.woff') format('woff');
}
/* in separate css .elements or even the whole body, edit your font properties */ 
body {
font-family: OpenSymbol;
font-weight: normal;
font-style: normal;
..

No need to bother with Embedded OpenType (EOT) fontfiles, because they are only needed for IE9 (2011) and IE10 (2012). No need to bother with Scalable Vector Graphics (SVG) fonts, because they're no longer needed since iOS 5.0

Already since 2012 Web Open Font Format (WOFF) is fully supported by every known browser. Truetype Fonts (TTF) are used local on iMac and PC, and can be used local on Android and iPhone as well. That's why web developers often make this mistake, using TTF instead of WOFF for a site.

Tyler Streeter
  • 1,214
  • 12
  • 14
Geert Jan
  • 408
  • 1
  • 6
  • 22
4

It might be the browser is just not supporting the .ttf file. Consider working with fontsquirrel, it will generate all required files (.ttf, .woff, .svg, .eot) and css for you, and works in all browsers. I use it all the time...

Pevara
  • 14,242
  • 1
  • 34
  • 47
4

According to a sample font page from Font Squirrel, Both IE 9 and Firefox require font files to be served from the same domain as the page they are loaded into. So with @font-face, your only option is to find the font file(s) you are trying to use and upload them to the site, and then use code similar to the following:

@font-face {
font-family: 'MyWebFont';
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 */
}

Taken from http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax

EDIT: One more thing from the Font Squirrel page, if you are using an IIS server, the file types need to be add to the list of MIME types.

Greg Rozmarynowycz
  • 2,037
  • 17
  • 20