Go to one of my website with two different browser
Under the topbar navigator you will see a header “Every Tribe | Every Nation” that uses a web font. It render fine in Safari but not in Chrome
I am using Joe Font Pro stack but I also tried it in Header Pro and set the font manually. It didn’t work either.
Any idea why it not working in Chrome but in other brower? It render fine in Chrome on iPhone or mobile device
I am using the same font and Joe Font Pro over at
https://tribe.agwm.org/mytribe/mytribeis/
It renders fine in Chrome and other browser …
You have a CORS access policy being set in your header of
No 'Access-Control-Allow-Origin'
This is blocking Chrome from loading.
How do I remove it then?
Ensure that the font URL is the same as your server. The url to the font has a www in it whereas the origin has no www. These are considered as different sub-domains and so Chrome will stop cross origin sharing.
You can allow it in the htaccess file but it is much easier just to get the URL’s correct.
You are correct. Removing the www from the font link fixes it
Thank you
Look like i need to add to strip www in htaccess to prevent other adding www or it will break too.
Good thing this happened because I wasn’t aware about browser enforcing the cross domain rule well Chrome and Edge are two I am aware now so far. I was going to warehouse all the fonts and images that we have the copyright to some site like warehouse.ourdomain.com and call it from there.
The domain reside on the same server as the main site.
Look like i need to read up and learn how to add in htaccess to allow cross domain resources.
Thank for the input @teefers
Bill
You could just do a redirect from the www page to the non-www page.
I am redirecting everything to a non-www page, .RW added the www in the font path when I added the font to the RW resource, when I took it out then the font started to render to the font I set it to.
I maintain over 60 different domain websites, so I am setting up a warehouse server to keep all my fonts, and image etc and now I am learning about this CORS blocking which mean warehousing fonts is not going to be easy task or I am going to have to just install the same fonts on every domain that I use it on.
If you’re running Apache as your web server, you should be able to address CORS with modifications to the .htaccess file. Fonts, JavaScript and CSS, are active content(change what’s on the page) so rules for are being enforced more strictly than ever.
I have not tested this and on an iPad now but adding something like this to your .htaccess file might work.
Header set Access-Control-Allow-Origin "*"
I’m sure if you search you’ll find more examples.
This topic was automatically closed 6 days after the last reply. New replies are no longer allowed.