Dropdown Lists in Forms in Safari and Fonts in Firefox don't work properly. (Font issue?)

I recently did a clean install on my new 2019 MacBook Pro 16 inch. I got most of my files back from a combination of iCloud, Dropbox, and Time Machine. I did not restore from Time Machine back up but individually imported files/folders.

I needed to get all my fonts back so what I did was dragged fonts from the various Font folders in my backup drive time machine drive (System Library, User Library, etc) into Font Book so it can install them. After doing that some of them still weren't showing up in Photoshop, so I tried to re-install photoshop (via Adobe cc) but that didn't work. Then, I deleted all the fonts from Font Book and followed these instructions on how to clear font cache and databases: http://osxdaily.com/2015/01/08/clear-font-caches-databases-mac-os-x/

So next, I dragged all the fonts back into font book from my back up Font folders in Time Machine (system and user font folders inside library). The Photoshop fonts started working, but certain elements of Safari and Firefox aren't functioning properly.

• The issue I have in Safari is that I cannot see the text in dropdown lists in forms. See screenshot : http://prnt.sc/qjd6to
• Also sometimes when opening a new tab in Safari that tab's text won't appear, then it'll repeat later. See screenshot: http://prnt.sc/qjdbax
• In Firefox certain fonts don't load properly. See screenshot: http://prnt.sc/qjd914

Here's what I've tried to do so far in addition to the aforementioned.

• Repair disk permissions
• restart Safari and Firefox
• reinstall Firefox
• Reinstalled Mac OS Catalina 10.15.2 (obviously restarted computer)
• Shut down laptop

Whenever I searched for solutions online it was always web developers who had coding issues and not an issue in the browser, so I hope the Apple community can some to the rescue. 🙏