Question

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');

}

Answer 1

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.