My @font-face is not working on mobile devices on users end

Question

So I have completed my portfolio website by pure html and css, no wordpress or other website builders, and I've already hosted it online. I am using the font GT Walsheim Pro that I've downloaded from online and it works on other users desktop since I had them test it with their computer, but when they use their mobile device, including iPhones, the font does not work properly or has unexpected extra spacings between letters such as the headline on my homepage banner.

Please note I've only tested my @font-face on my homepage, since I don't see point in loading the same @font-face into other pages until I can resolve this issue. Please view just my homepage after clicking onto my website link.

Link to my website is www.dxgraphicsdepartment.com

I have checked my @font-face code structure too, including syntex, path directory and the font family name that I gave to certain headers and titles, are the exact same as I labelled on @font-face font-family. I've also sourced the following formats for the fonts I use ("truetype", "woff", "woff2", "opentype", "eot", and "svg". I've also tested single quotations for the URL paths and everything that has quotations, it made no difference. Currently I edited the code to double quotations, still no difference. I'm just frustrated having to constantly review and edit the code, and it still isn't working on mobile / iOS. Those of you who have tablets, I want you to also test if the font is the same as it is on desktop. When I'm previewing using my own browser, even tablet and mobile mode, the font displays properly, but not on users mobile end.

Here is my @font-face structure below:

@font-face {
    font-family: "GT-Walsheim-Pro-Light";
    src: url("fonts/GTWalsheimPro-Light.ttf") format("truetype"),
         url("fonts/GTWalsheimPro-Light.woff") format("woff"),
         url("fonts/GTWalsheimPro-Light.woff2") format("woff2"),
         url("fonts/GTWalsheimPro-Light.otf") format("opentype"),
         url("fonts/GTWalsheimPro-Light.eot") format("eot"),
         url("fonts/GTWalsheimPro-Light.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "GT-Walsheim-Pro-Regular";
    src: url("fonts/GTWalsheimPro-Regular.ttf") format("truetype"),
         url("fonts/GTWalsheimPro-Regular.woff") format("woff"),
         url("fonts/GTWalsheimPro-Regular.woff2") format("woff2"),
         url("fonts/GTWalsheimPro-Regular.otf") format("opentype"),
         url("fonts/GTWalsheimPro-Regular.eot") format("eot"),
         url("fonts/GTWalsheimPro-Regular.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "GT-Walsheim-Pro-Medium";
    src: url("fonts/GTWalsheimPro-Medium.ttf") format("truetype"),
         url("fonts/GTWalsheimPro-Medium.woff") format("woff"),
         url("fonts/GTWalsheimPro-Medium.woff2") format("woff2"),
         url("fonts/GTWalsheimPro-Medium.otf") format("opentype"),
         url("fonts/GTWalsheimPro-Medium.eot") format("eot"),
         url("fonts/GTWalsheimPro-Medium.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}

Here are some of my CSS code blocks below, using the font with the exact same names as labelled in @font-face, and .homepage-banner-text-mobile h1 is the main headline on the banner. I intentionally used "GT-Walsheim-Pro-Light" (GT Walsheim Pro Light) with the bold weight since I wanted a weight which is between GT Walsheim Pro Regular and GT Walsheim Pro Medium. The weight works perfectly on desktop view on users end, but not on mobile. I had over 5 friends viewed the homepage and not only did the h1 font-weight did not display, but there were weird letter-spacings that I did not do. Also .homepage-banner-text-mobile h4 is the sub-head of the homepage banner.

.tablet-and-mobile-nav ul li a {
    color: #ffffff;
    font-family: "GT-Walsheim-Pro-Regular";
    font-weight: 400;
    font-size: 20px;
    padding: 28px 0px 13px 0px;
    display: flex;
    position: relative;
    text-align: center;
    flex-direction: column;
    text-decoration: none;
}
.homepage-banner-text-mobile h1 {
    padding: 17.14285714285714px 0px 5.142857142857141px 0px;
    color: #ffffff;
    font-family: "GT-Walsheim-Pro-Light";
    font-size: 30px;
    font-weight: bold;
}
.homepage-banner-text-mobile h4 {
    padding: 5.142857142857141px 0px 8.571428571428569px 0px;
    color: #ffffff;
    font-family: "GT-Walsheim-Pro-Regular";
    font-size: 20.57142857142857px;
}
.view-projects-button-mobile {
    border-radius: 20px;
    border: none;
    padding: 8px 49.5px 8px 49.5px;
    margin: 4.285714285714284px 5px 4.285714285714284px 5px;
    font-family: "GT-Walsheim-Pro-Medium";
    font-size: 18.21428571428571px;
    font-weight: 560;
    color: #0d0d0d;
    background-color: #ffffff;
}
.learn-about-me-button-mobile {
    border-radius: 20px;
    border: none;
    padding: 8px 45px 8px 45px;
    margin: 4.285714285714284px 5px 4.285714285714284px 5px;
    font-family: "GT-Walsheim-Pro-Medium";
    font-size: 18.21428571428571px;
    font-weight: 560;
    color: #0d0d0d;
    background-color: #ffffff;
}

.headline h2 {
    display: flex;
    justify-content: center;
    align-items: center
    flex-direction: column;
    text-align: center;
    font-family: "GT-Walsheim-Pro-Regular";
    font-size: 22px;
    font-weight: 400;
    color: #ffffff;
    margin: 81px 40px 0px 40px;
}
.body-text {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    font-family: "GT-Walsheim-Pro-Regular";
    font-size: 15px;
    font-weight: 300;
    color: #ffffff;
    margin: 250px 40px 250px 40px;
}

Answer 1

In fact your @font-face rules work properly.

"faux bold" rendering is unpredictable

The term "faux bolds" describes the process of artificially boldening a font to emulate a bolder/thicker appearance. This technique is used e.g. to get a bold font-weight when your font-family doesn't include a genuine bold design. See also "Fake Bolding of Web Fonts"

TL; DR: The visual result is inferior to a proper bold font.

Besides, the rendering result are quite different in various browsers.

E.g Safari tends to add some sort of letter-spacing.

Besides, you don't have fine grained control of the amount of boldening:
The browser will bolden the font to somthing like 700 regardless of the font-weight you've specified. So it doesn't make any difference whether you set it to font-weight:560' or font-weight:700'.

Workarounds

If your ultimate goal is to achieve a lighter appearance of your headings you could instead play with

• letter-spacing
• -webkit-text-stroke
• for monochrome designs: color (e.g using a dark gray instead of pure black)
• search for alternative variable fonts

:root {
  --bg: #000;
  --text: #fff;
}

body {
  font-family: 'GT Walsheim Trial';
  font-weight: 400;
  background-color: var(--bg);
  color: var(--text);
}

h1 {
  font-size: 48px;
}

.w400 {
  font-weight: 400;
}

.w450 {
  font-weight: 500;
  -webkit-text-stroke: 0.0075em var(--bg);
  letter-spacing: 0.01em;
}

.w450-2 {
  font-weight: 500;
  color: rgb(235, 235, 235);
  letter-spacing: 0.02em;
  transform: scale(0.97);
  transform-origin: 0px;
}

.w500 {
  font-weight: 500;
}

<link href="https://fonts.cdnfonts.com/css/gt-walsheim-trial" rel="stylesheet">

<h1 class="w500">GT-Walsheim 500</h1>
<h1 class="w450">GT-Walsheim faux 450</h1>
<h1 class="w400">GT-Walsheim 400</h1>

<h1 class="w500">GT-Walsheim 500</h1>
<h1 class="w450-2">GT-Walsheim faux 450-2</h1>
<h1 class="w400">GT-Walsheim 400</h1>

In your case text-stroke might be the best approximation.
However this property is quite unpredictable as well - especially when dealing with variable fonts as explained her: "Text Stroke (-webkit-text-stroke) css Problem"

Variable fonts

Obviously the best option would be to find a variable font version of your font or a replacement.

fontWeight.addEventListener('input', function(e) {
  let value = e.target.value;
  fontSample.setAttribute('style', 'font-weight:' + value)
  fontWeightVal.textContent = value
})

/* latin */

@font-face {
  font-family: 'Urbanist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/urbanist/v15/L0x-DF02iFML4hGCyMqlbS0.woff2) format('woff2');
}

body {
  font-family: 'Urbanist';
  font-weight: 400;
}

h1 {
  font-weight: 500;
  transition: 0.5s;
}

<h1 id="fontSample">Hamburglefonstiv</h1>

<p>
  <input id="fontWeight" type="range" value="400" min="100" max="900" step="1">
  <span id="fontWeightVal">400</span>
</p>