Why are my custom fonts not working on mobile devices?

Question

Why won't my custom font work for mobile but it works fine on desktop?

This is the code I put at the top of my css file:

@font-face {
    font-family: 'NewYork';
    src: url('fonts/NewYork.eot');
    src: url('fonts/NewYork.eot?#iefix') format('embedded-opentype'),
        url('fonts/NewYork.woff2') format('woff2'),
        url('fonts/NewYork.woff') format('woff'),
        url('fonts/NewYork.ttf') format('truetype'),
        url('fonts/NewYork.svg#NewYork') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat Alternates';
    src: url('fonts/MontserratAlternates-Regular.eot');
    src: url('fonts/MontserratAlternates-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/MontserratAlternates-Regular.woff2') format('woff2'),
        url('fonts/MontserratAlternates-Regular.woff') format('woff'),
        url('fonts/MontserratAlternates-Regular.ttf') format('truetype'),
        url('fonts/MontserratAlternates-Regular.svg#MontserratAlternates-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat Alternates';
    src: url('fonts/MontserratAlternates-Light.eot');
    src: url('fonts/MontserratAlternates-Light.eot?#iefix') format('embedded-opentype'),
        url('fonts/MontserratAlternates-Light.woff2') format('woff2'),
        url('fonts/MontserratAlternates-Light.woff') format('woff'),
        url('fonts/MontserratAlternates-Light.ttf') format('truetype'),
        url('fonts/MontserratAlternates-Light.svg#MontserratAlternates-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

And this is how I style it:

*{
font-family: 'Montserrat Alternates', serif;
color: rgba(40, 40, 43, 1);
font-size: clamp(12px, 30vw, 18px);
font-weight: normal;
font-style: normal;
font-display: swap;
line-height: 1.7em;
padding: 0;
max-width: 100%;
margin: 0;
box-sizing: border-box;
}

h1 {
  font-size: clamp(15px, 9vw, 170px);
  color: rgba(0, 142, 83, 1);
  font-family: 'NewYork', serif;
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  letter-spacing: 0.04em;
  line-height: 7rem;
  text-align: center;
}

link to site and what it should look like: https://robynloudang.github.io/Portfolio/index.html

[screenshot of the font on mobile][1]

[1]: https://i.sstatic.net/dWxsj.jpgstrong text

Answer 1

Your fonts aren't loaded at all(also in desktop view), as the path to your font directory isn't correct.

https://robynloudang.github.io/Portfolio/fonts/MontserratAlternates-Regular.woff2

works!

https://robynloudang.github.io/Portfolio/styles/fonts/MontserratAlternates-Regular.woff2

nope!404

You will also see a debug message in dev tools.
Just move your "fonts" folder in your "styles" folder or edit your @font-face declaration:

    @font-face {
        font-family: 'Montserrat Alternates';
        src: url('../fonts/MontserratAlternates-Regular.woff2') format('woff2'),
            url('../fonts/MontserratAlternates-Regular.woff') format('woff'),
            url('../fonts/MontserratAlternates-Regular.ttf') format('truetype'),
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }