google font not fetching: please fix causing PREVIEW area Glitch maybe

Note: I have no firewalls enabled and when I navigate to the requesting link manually the google URL is reachable not sure why this is occurring but may be causing my iFrame to not load any preview of websites when successful.... Although it shows in a new tab, help me fix this. It's just the preview tab stuck on spinner after successful web generation, the edit tab works fine.... here are my log errors guys

Console ERROR for MacOS:
⚠ [next]/internal/font/google/inter_5b7354a3.module.css
next/font: warning:
Failed to download `Inter` from Google Fonts. Using fallback font instead.

Import trace:
[next]/internal/font/google/inter_5b7354a3.module.css
[next]/internal/font/google/inter_5b7354a3.js
./app/layout.tsx

GET /api/sandbox-status 200 in 181ms
⚠ [next]/internal/font/google/inter_5b7354a3.module.css
Error while requesting resource
Received response with status 404 when requesting https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap
Import trace:
[next]/internal/font/google/inter_5b7354a3.module.css
[next]/internal/font/google/inter_5b7354a3.js
./app/layout.tsx

⚠ [next]/internal/font/google/inter_5b7354a3.module.css
next/font: warning:
Failed to download `Inter` from Google Fonts. Using fallback font instead.

Import trace:
[next]/internal/font/google/inter_5b7354a3.module.css
[next]/internal/font/google/inter_5b7354a3.js
./app/layout.tsx

GET /api/sandbox-status 200 in 70ms