Font not rendering in Chrome?


(Bill Fleming) #1

Go to one of my website with two different browser

https://missionsmusic.com/

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


(Bill Fleming) #2

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 …


(Doug Bennett) #3

You have a CORS access policy being set in your header of

 No 'Access-Control-Allow-Origin'

This is blocking Chrome from loading.


(Bill Fleming) #4

How do I remove it then?


(Andrew Tavernor) #5

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.


(Bill Fleming) #6

You are correct. Removing the www from the font link fixes it

Thank you


(Bill Fleming) #7

Look like i need to add to strip www in htaccess to prevent other adding www or it will break too.


(Bill Fleming) #8

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


(Robert Ziebol 🖖🏼) #9

You could just do a redirect from the www page to the non-www page.


(Bill Fleming) #10

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.


(Doug Bennett) #11

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.


(system) #12

This topic was automatically closed 6 days after the last reply. New replies are no longer allowed.