Font does not show up correctly in mobile phone

I tried to load a font in HTML both in TTF and, via conversion tools, WOFF and WOFF2. It shows up in my laptop, but not correctly in my mother's phone (using Chrome):

<script rel="preload" src="https://violetscript.github.io/docs/fonts/cour.woff2" as="font" type="font/woff2" crossorigin></script>

I did also try CSS @font syntax with TTF and it still didn't show up in the phone's web browser. The font shows different from desktop.

The font in question is Courier New, extracted from Windows' C:/Windows/Fonts path.

Previous @font-face

Here's the previous @font-face attempt:

@font-face {
  font-family: 'Courier New';
  font-style: normal;
  font-weight: normal;
  src: url('https://violetscript.github.io/docs/fonts/cour.woff2') format('woff2');
}

Working Snippet using <script/>

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

html, body {
  font-family: 'Courier New';
  font-size: 64px;
}

<!-- language: lang-html -->

<script rel="preload" src="https://violetscript.github.io/docs/fonts/cour.woff2" as="font" type="font/woff2" crossorigin></script>

undefined

<!-- end snippet -->

Working Snippet using CSS @font-face

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

@font-face {
  font-family: 'Courier New';
  font-style: normal;
  font-weight: normal;
  src: url('https://violetscript.github.io/docs/fonts/cour.woff2') format('woff2');
}

html, body {
  font-family: 'Courier New';
  font-size: 64px;
}

<!-- language: lang-html -->

undefined

<!-- end snippet -->

Interestingly, if you replace cour.woff2 by verdana.woff2, it'll successfully change the font appearance to Verdana, even if body { font-family: 'Courier New' }, so my @font-face just works.

What the font looks like

It should show up text exactly like this:

If you change the @font-face's URL to verdana.woff2 file, you'll see this:

Changing @font-face to point to Verdana

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

@font-face {
  font-family: 'Courier New';
  font-style: normal;
  font-weight: normal;
  src: url('https://violetscript.github.io/docs/fonts/verdana.woff2') format('woff2');
}

html, body {
  font-family: 'Courier New';
  font-size: 64px;
}

<!-- language: lang-html -->

undefined

<!-- end snippet -->

I can't really be sure it works. But as far as I know this is how you declare a font-face from CSS.

@font-face {
  font-family: 'Cour2';
  font-style: normal;
  font-weight: normal;
  src: url('https://violetscript.github.io/docs/fonts/cour.woff2') format('woff2');
}

html {
  font-family: 'Cour2';
}

Let me know if the font shows correctly.

Still do not rely on users downloading your fonts. always add fallbacks that work on any device, for example for Courier New you can:

html {
  font-family: 'Cour2, Courier New, monospace';
}