Search code examples
cssfirefoxsafarifont-face

why does @font-face work on safari and not on firefox? (Mac versions)

I've used the following in the CSS file of the website. It works on safari but not on Firefox. I'm a newbie so apologies for this if it seems like a simple question. Been trying now for 3 hours.

@font-face { font-family: handwriting; src: url(http://example.com/handwriting.ttf); }

Thank you in advance.

Solution

  • Firefox prevents the loading of fonts served from a different domain unless they are sent with HTTP access control headers.

    Use relative paths if you are serving the font from the same domain. If handwriting.ttf was in the same directory as your css file then you would use this:

    @font-face { font-family: handwriting; src: url(handwriting.ttf); }