Why are my custom fonts not working on mobile devices? - html

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.stack.imgur.com/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;
}