Image blurred on mobile google fonts don't render

I have launched my personal site after building it in codepen where everything worked and looked great. However once I try to view my site on mobile I notice that my background image is completely blurred and my custom fonts are not working. I have searched and searched as to why this would be the case but can’t find anything. If anyone has a moment to look at this I would greatly appreciate it.

Here is the site

Here is my unanswered stack-overflow question

Thank you.