Custom Fonts Not Loading Properly

Site URL: https://www.drangelabrooks.com

Hi all, I added a custom font to a website I built, following instructions online with the following code:

@font-face {
font-family: 'font-name';
src: url(https://static1.squarespace.com/static/60c04bccb3eb927f554f9eeb/t/60cec441871e18034ea73d58/1624163393990/Corinthiago.otf)

}
h2 {
font-family: 'corinthiago', Balboa Plus Inline;
}

...but it only loads properly on my laptop. On my phone and other devices the font that loads in place of the Corinthiago is some bland font that I haven't used anywhere else in the design. The default font I have is a squarespace one--Balboa Plus Inline, but that one doesn't load in place of the Corinthiago. I don't know a lot about coding--would anyone be able to help me troubleshoot this? In the meantime I've just removed the custom CSS so that Balboa Plus Inline is all that loads, but that's not my client's preference.

Thanks for your help!

you haven't specified the font name in your style sheet, it's still in there as "font-name". Probably just didn't spot you had to change it in two places from where you copied it in.

change that to corinthiago and you'll probably be OK. the reason it works on your laptop is probably because you've got the font installed locally.

so something like this.

@font-face {
font-family: corinthiago;
src: url(https://static1.squarespace.com/static/60c04bccb3eb927f554f9eeb/t/60cec441871e18034ea73d58/1624163393990/Corinthiago.otf)

}
h2 {
font-family: corinthiago, "Balboa Plus Inline";
}

Oh, derp. Totally missed that. Thank you so much for your response! I'll try that!