We (me and one of my team member) were working on a wordpress website from some time. it was good and everything was working fine. My client is a very techy guy and like to do all the stuff with his websites.
Due to some business reasons and his business model logic he wants to make the same copy of the website and put them all on different sub domains basically he was making a location based website so that users from different states see different website page as landing page and then they all move to common area. well things were going great and we were working on it. when all was done and we were happy that everything went fine in the end.
After some time we noticed a snag in our happy meal hour that our fonts were not showing properly on firefox.
you might be wondering in your head “what ?” or “why ?” same question popped in our heads and we were all scratching our galactic cosmos heads and wondering what happened. then we noticed that somehow firefox is not loading @font-face font linking. that was not our first time since we are using this on like all the websites on daily basis so what went wrong. in the end what we came to realise is that since we were using the same theme and pretty much using the same website files on three domains so for sub domains the files were kind of linked as external source and here the game was getting interesting.
Firefox was treating our @font-face linking as external linking or more like cross-domain fonts.
since the website was being accessed by like demo.websysdynamics.com instead of www.websysdynamics.com so firefox was regarding it as cross-domain which means that our font will not load in it. bummer and a bang on head.
So what was the solution for it well i did some research and find it out on some other websites on firefox forums that to fix that solution we need to add few lines code in .htaccess file and placed it inside the font folder/directory.
We added this small piece of code in .htaccess file and placed it into that directory where our fonts were placed
<FilesMatch "\.(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch>
with that our problem was solved so i am writing this blog post so if in future someone got this problem he/she may find it or at-least I know where to look for it next time i got something like this again 🙂