More and more sites are using downloadable icon fonts instead of individual images for their buttons. When Firefox can't find a character in a font, it displays that tall box with the code of the missing character.

Usually this is caused by overriding website fonts with a standard set of fonts. You can check for and undo that change on the Preferences page:

"3-bar" menu button (or Firefox menu) > Preferences > Content

Click the "Advanced" button and if the checkbox for "Allow pages to choose their own fonts, instead of my selections above" is empty, go ahead and check it. Then OK that change.

If you reload the page, do the icons display?

It was already checked.

Special icons are usually supplied by a font that is downloaded from the server (@font-face) as you might see by little boxes that show the hex code of the characters instead. If you have a font installed that covers this Unicode range then you may see a real character and not the little box with the CSS code.

You can check the gfx.downloadable_fonts.enabled pref on the about:config page and make sure that it is set to true (if necessary double-click the line to toggle its value to true).

You can open the about:config page via the location/address bar. You can accept the warning and click "I'll be careful" to continue.

• http://kb.mozillazine.org/about:config

It was already true.

If you use extensions (Firefox menu button/Tools > Add-ons > Extensions) that can block content (e.g. Adblock Plus, NoScript, Flash Block, Ghostery) then make sure that such extensions aren't blocking content.

Start Firefox in Safe Mode to check if one of the extensions (Firefox menu button/Tools > Add-ons > Extensions) or if hardware acceleration is causing the problem.

• Switch to the DEFAULT theme: Firefox menu button/Tools > Add-ons > Appearance
• Do NOT click the Reset button on the Safe Mode start window

• https://support.mozilla.org/kb/Safe+Mode
• https://support.mozilla.org/kb/Troubleshooting+extensions+and+themes

You can check the Net log and the Network log in the Web Console (Firefox/Tools > Web Developer) to see if content fails to load or possibly is blocked (file size is zero).

• https://developer.mozilla.org/Tools/Network_Monitor

Use Ctrl+F5 or Ctrl+Shift+R to reload the page and bypass the cache to generate a fresh log.

Hmm, this is interesting. Netflix uses a font for their own logo on the home page. Talk about working without a net...

The font file that Firefox can use is this one: https://assets.nflxext.com/ffe/siteui/fonts/nf-icon-v1-72.woff

It will look like gibberish if you try to load it in a tab, but if you try it, does Firefox even load the file?

Gibberish confirmed jscher2000.

Starting Firefox in Safemode did not fix the issue either.

Could you try the Network Monitor (mentioned previously by cor-el). In your Netflix tab, open the Web Console at the bottom using Ctrl+Alt+k (or the Developer menu). Along the top of the console, click the Network button. Then reload the Netflix page bypassing the cache, using Cmd+Shift+r.

The network tab should fill with a list of files Firefox is requesting from the site. Can you find the font file? A 200 status indicates a successful retrieval. I have attached a screen shot for comparison.

(I don't know why it was served as text/plain since it clearly is not plain text...)

If the file is retrieved successfully but not applied, please check the Console section of the web console for any font-related error messages.

File was downloaded successfully.

Screenshot

The console did spit this out for Netflix

I tried setting the key security.fileuri.strict_origin_policy to false suggested here and it did NOT work.

http://stackoverflow.com/questions/19817459/firefox-font-face-with-local-file-downloadable-font-download-failed

I am getting the cross-origin request blocked on a lot of sites. This is why nothing is rendering correctly.

Hmm, "successful" retrieval but 0K in size, so retrieved an empty file.

The fileuri preference(s) relate to the file:// protocol, so that's not relevant to two different web domains.

Why would the CORS headers be blocked/stripped? Could you expand the headers and see whether Firefox is sending the Origin header in the request, and what kind of access control header you're getting in the response?

If Firefox sends the appropriate headers but you don't get the right headers back, perhaps there is a proxy or some privacy tool external to Firefox that is modifying the headers.

screenshot

mine appears to be coming from cdn.netflix.com yours is comeing from assets.netflix.com

Yes, I'm not logged in, maybe that's why the server is different? But if I load your font file directly, I do get the access control header from the server. (Screen shot attached)

Are you accessing directly or through a proxy, private VPN, Hola, Tor, etc., that could be modifying what you receive?

screenshot

Clearly it's different, but I don't know why. I think it's probably something external to Firefox, but a useful way to check is to create a second Firefox profile without customizations to see whether you get the same results. This will be in parallel to your regular settings so you can immediately switch back after testing.

Create a new Firefox profile

A new profile will have your system-installed plugins (e.g., Flash) and extensions (e.g., security suite toolbars), but no themes, other extensions, or other customizations. It also should have completely fresh settings databases and a fresh cache folder.

Please see our help article for how to call up the Profile Manager on Mac: Profile Manager - Create, remove or switch Firefox profiles.

Important: Don't delete anything in the profile manager! There's no recovery for deletions.

Any time you want to switch profiles, exit Firefox and return to this dialog.

Click the Create Profile button, assign a name like TEST102115, and skip the option to relocate the profile folder. After creating the profile, select it and start Firefox in that profile.

Any difference with Netflix fonts?

When returning to the Profile Manager to switch back, you might be tempted to use the Delete Profile button for the TEST profile. But it's a bit too easy to accidentally delete your "real" profile, so I recommend resisting the temptation. If you do want to clean up later, I suggest making a backup of all your profiles first in case something were to go wrong.