web site different rendering on remote an local url in safari

Question

I'm developing my wedding's website, and I have a problem I really don't understand: when I browse it on my local machine the site is rendered correctly, but if I browse the site remotely there is a section shown in a wrong way. In order to be sure about the files correctness I just removed on ftp all the site's files and re-uploaded them from scratch. Same problem. It happens on safari only, on all the other browsers the site is rendered fine

this is how I see the site locally

this is how I see the same file remotely

How can it be possible?

For anyone who want to help the link to the site is http://silviaesimone.com

thank you

Answer 1

The server is using the wrong MIME type for the Bebas Neue font. It sends the font as text/plain which, apparently, Safari can't handle.

Solution: make sure that files with extension .otf are served with the correct MIME type, which is font/opentype.

(It depends on the kind of server how you need to do that; see here for IIS or here for Apache).