Icons are not loading properly!
I'm looking at songs online on the iTunes website and some of the icons are not loading properly. I only seem to be having this problem with this site(all songs/pages). I've included a screenshot of what it looks like for me and what I've tried that didn't fix the problem. I'm using a Macbook Pro running Sierra and I have the latest version of Firefox(55.0.3) installed.
- Cleared history, cookies and cache
- Tried SafeMode
- Allow pages to choose fonts
- gfx.downloadable_fonts.enabled pref on the about:config page is set to true
Modified by jndiamond
All Replies (7)
Special icons are usually supplied by a font that is downloaded from the server (@font-face) You may see little boxes with the hex code of the character if you do not have a font installed that covers this Unicode range.
You can check gfx.downloadable_fonts.enabled on the about:config page and make sure it is set to true (if necessary double-click the line to toggle its value to true).
You can also check the Web Console for issues with downloading fonts.
- "3-bar" menu button or Tools -> Web Developer
- https://developer.mozilla.org/en/Tools/Web_Console
- https://developer.mozilla.org/en/Tools/Network_Monitor
I've already checked the about:config and it is set to true. I took screenshots of the Web Console and Network Monitor.
As you can see in the second screenshot,Firefox is blocking the font files because the server doesn't send the correct CORS headers and Firefox block the file because of that.
- Cross-Origin Request Blocked
- https://developer.mozilla.org/en-US/docs/Web/HTTP/Server-Side_Access_Control
Can you post a link to a publicly accessible page (i.e. no authentication or signing on required)?
I'm not sure what type of link you'd like but this is the link to the song on iTunes. You don't have to sign in to access it or anything.
https://itunes.apple.com/us/album/too-much-to-ask-single/id1280708478
Yes. it is just as I thought. You can't do anything about this. The website needs to fix this on their side. You can contact them and point them to the CORS article about 'Server-Side_Access_Control' and possibly include a screenshot of the Web Console (second screenshot in your post).
Okay, thank you for your help.
Actually on further examining it looks that something else is wrong in this case.
The icons at the top use font-family:'SF Pro Icons'; and this font is served properly and Firefox appears to download this font, but for some reason the font isn't applied. I do not know how to troubleshoot WOFF2 font issues. A font log doesn't show anything unusual as well.
[Main Thread]: D/userfonts userfonts (0x98e53880) [src 0] failed local: (☺︎) for (SF Pro Icons) [Main Thread]: D/userfonts userfonts (0xa2b3ea60) download start - font uri: (https://www.apple.com/wss/fonts/SF-Pro-Icons/v1/SFProIcons_regular.woff) referrer uri: (https://www.apple.com/wss/fonts?families=SF+Pro,v1|SF+Pro+Icons,v1) [Main Thread]: D/userfonts userfonts (0x98e53880) [src 1] loading uri: (https://www.apple.com/wss/fonts/SF-Pro-Icons/v1/SFProIcons_regular.woff) for (SF Pro Icons) [Main Thread]: D/userfonts userfonts (0xa2b3ea60) download completed - font uri: (https://www.apple.com/wss/fonts/SF-Pro-Icons/v1/SFProIcons_regular.woff) time: 494 ms [Main Thread]: D/userfonts userfonts (0x98e53880) [src 1] loaded uri: (https://www.apple.com/wss/fonts/SF-Pro-Icons/v1/SFProIcons_regular.woff) for (SF Pro Icons) (0x9a4fc320) gen: 00000007 compress: 17% [Main Thread]: D/userfonts userfonts (0xa2b3ea60) reflow for pres context 0x98d3d800