0

I am developing a site locally and am using webfonts for symbols. When I just view the file in my browser (i.e. file:///path/to/file.html) the webfonts work in Chrome but not Firefox. However, if I upload the site to my server and view the file in Firefox, it works fine. Any idea why that would be and what I can do to view the file correctly locally?

Here is a code snippet (all paths are valid):

@font-face {
font-family: 'WebSymbolsRegular';

src: url('fonts/websymbols.eot?#iefix') format('embedded-opentype'),
     url('fonts/websymbols.woff') format('woff'),
     url('fonts/websymbols.ttf') format('truetype'),
     url('fonts/websymbols.svg#WebSymbolsRegular') format('svg'),
     url('fonts/websymbols.eot');

}

Mike
  • 1,718
  • 3
  • 30
  • 58

1 Answers1

2

It's most likely due to the protocol (file instead of http). You will almost always want to test things on a local server instead of just opening a page from disk in the browser. Install Apache, Nginx, or Lighttpd for Linux; or IIS, IIS Express, or Apache for Windows. Then, setup a local site (i.e., localhost:1234) that points to the folder with your site, and run your pages through that.

ventaur
  • 1,821
  • 11
  • 24
  • Thanks for the comment. I already have a lamp environment set up, but my eclipse workspace is not set up there. I just moved my files and it worked fine. – Mike Dec 30 '12 at 07:41