Default fonts in browser are not as expected

When opening the developer tools in my browser I see that -apple-system & BlinkMacSystemFont is prepended to the font-family and manually removing this seems to fix the issue on some sites.

When using instagram web app (many other sites as well) here is what the text looks like:

Strange font example

Not quite sure what is happening but this problem seems to have come with setting up my second monitor. This issue also occurs in firefox as well.

Just wondering how I can get my default fonts back. Each browser's default is setup as DejaVu Sans

EDIT:

OS: Ubuntu 20.04.02 LTS

I have also tried disabling fractional scaling and restarting my system with no luck.

After running command mentioned by @Gunnar Hjalmarsson:

Output:

jordan@jordan-pc:~$ fc-match -s | head -5 Fontconfig error: Cannot load default config file FreeMono.ttf: "FreeMono" "Regular" FreeSans.ttf: "FreeSans" "Regular" FreeSerif.ttf: "FreeSerif" "Regular" opens___.ttf: "OpenSymbol" "Regular" AnjaliOldLipi-Regular.ttf: "AnjaliOldLipi" "Regular" 

While debugging before this step I manually deleted /etc/fonts/fonts.conf

Know someone who can answer? Share a link to this question via email, Twitter, or Facebook.