How to let @font-face work in Firefox using Weebly

Question

I've succesfully used the @font-face rule to use a font on my Weebly website. That is... in Chrome, not Firefox. I've found the 'hack' to use a .htaccess file. But Weebly doesn't allow to add a .htaccess file. So I'm back to square one... Any tips, anyone?

http://www.ziehaar.nl

looks exactly the same both in FF and Chrome, not sure what are you asking. Where are those fonts supposed to be applied? — Devin, Sep 11 '14 at 19:05
@Fabio The heading should be FilmotypeBrooklyn. It's the same font as in the logo 'get in the picture'. In Firefox it looks like Times. — Anita Nederkoorn, Sep 14 '14 at 14:58
Anita, I took a screen-shot in both Chrome and FF and they look the same, exception made that I'm not seeing that Newsletter opt-in box in FF, but fonts are the same, so it's possible that you're seeing a cached version in Chrome. See screen-shot at http://i60.tinypic.com/voq6gk.jpg . Anyways, for your problem, see answer — Devin, Sep 14 '14 at 20:59

score 0 · Answer 1 · edited May 23 '17 at 12:29

The problem with your font rendering in Firefox comes from permission directives. For security reasons, Firefox has a set of directives for font-face that includes the dreaded "Same Origin Policy" restriction, which means your fonts have to be served from the same domain the page resides at. So, with that in mind, we can have the easiest solution:

Solution #1

host your fonts at www.ziehaar.nl (and warning: depending on the .htaccess file you have in your site, the www. part will make a difference, meaning that you might be able to see the font if you type www.ziehaar.nl yet not see it if you type ziehaar.nl

Solution #2 Host the fonts elsewhere, and take a look at this thread at Stack Overflow on ways to circumvent the "same origin policy" rule.

Solution #3 Add the following to your .htaccess file:

<FilesMatch "\.(eot|otf|woff|ttf)$">
  SetEnvIf Origin »
    "^http(s)?://(.+\.)?(weebly\.com|ziehaar\.nl)$" origin_is=$0
  Header set Access-Control-Allow-Origin %{origin_is}e env=origin_is
</FilesMatch>

Depending on your skills you may try to use different solution until it works, but just for the sake of it and to show everything other than cross-domain policies are fine, take a look at the image below:

ff fonts example

As you may see, I'm seeing your fonts correctly in Firefox after testing. That's because I loaded your font files and now they're in my Firefox cache , hence the cross-domain isn't affecting the rendering of those fonts.

Anyways, hope this helps, just let us know how it goes

How to let @font-face work in Firefox using Weebly

1 Answers1