Website text not loading / not visible in some devices

Question

I have a website with the domain nitrous.dev.

Currently, I am facing an issue where the text of my website does not show up when it is opened from certain devices. The devices I have tested that experiences the problem includes an old iMac (don't know the exact year but pre-2015), an iPhone 6, GTMetrix video analysis.

However, when I open the website on most modern devices like my laptop (Windows 10, Chrome), the issue does not seem to appear. It also works fine on an iPhone 11, iPhone 8, MacBook Pro (newer than iMac mentioned before).

For the font, I am currently using Google Fonts Open Sans and Roboto, loading them in the head tag of pages. The website uses simple HTML, CSS, and Bootstrap 5 delivered from Bootstrap's CDN (Stackpath).

This is my first bootstrap-based website (typically work with WordPress) and I can't figure out what is wrong :(

Can anyone please explain the issue and the solution to it?

Here are some of the code inside my website

In every page (HTML)

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,bold|Roboto:300,400">

In global.css

body {
background-color: black;
color: #e2e2e2;
font-family: "Open Sans", var(--bs-font-sans-serif), sans-serif;}

Thanks a lot in advance!

Sorry if I have made any mistakes, this is my first time using Stack Overflow to ask questions.