Activating custom font on desktop/mobile

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

My custom font is active in the web builder and on my desktop but the website reverts back to the default/system font on mobile and other desktops. I uploaded an .otf, .ttf, woff and woff 2 files. I feel like I've uploaded everything necessary, is there something I am doing wrong. Thanks for the help!

@font-face{
     font-family: 'ModenaSans-Regular';
     src: url ('https://static1.squarespace.com/static/5e51ebd012eb83660a18430c/t/5f299e1db82e0a1a83a9425e/1596562973434/ModenaSans-Regular.otf'), url('https://static1.squarespace.com/static/5e51ebd012eb83660a18430c/t/5f3d56a52d553a03bda87d48/1597855397887/ModenaSans-Regular.ttf'), url('https://static1.squarespace.com/static/5e51ebd012eb83660a18430c/t/5f3d58d79004342427382105/1597855959709/ModenaSans-Regular.woff'), url('https://static1.squarespace.com/static/5e51ebd012eb83660a18430c/t/5f3d58db40ab7c08450d8a8f/1597855963717/ModenaSans-Regular.woff2');
     font-weight: regular;
}

h1 {font-family: 'ModenaSans-Regular';
}

I have the same problem.

url: https://ossostudio.squarespace.com
Password: osso

I have bought a webfont trough Myfonts and also uploaded .woff and .woff2.
I used the code below but the font also only works on one of my laptops. I suspect it's because the font is installed on that macbook.
but on any other device that doesn't have the font installed it reverts back to default fonts.

I asked for support from squarespace but they don't offer it for custom CSS.

@font-face {
  font-family: 'MonoSpec-Regular';
  src: url('webFonts/MonoSpec-Regular/font.woff2https://static1.squarespace.com/static/5f27084b74011038bfe3bfb8/t/5f3d403a2dd86858ae580f20/1597849659484/font.woff2') format('woff2'), url('webFonts/MonoSpec-Regular/font.woffhttps://static1.squarespace.com/static/5f27084b74011038bfe3bfb8/t/5f3d403a2dd86858ae580f20/1597849659484/font.woff2') format('woff');
}

h1, h2, { 
	font-family: MonoSpec-Regular;
}
p {font-family: MonoSpec-Regular;
}

17 hours ago, vincentvers said:

I have the same problem.

url: https://ossostudio.squarespace.com
Password: osso

I have bought a webfont trough Myfonts and also uploaded .woff and .woff2.
I used the code below but the font also only works on one of my laptops. I suspect it's because the font is installed on that macbook.
but on any other device that doesn't have the font installed it reverts back to default fonts.

I asked for support from squarespace but they don't offer it for custom CSS.

 

@font-face {
  font-family: 'MonoSpec-Regular';
  src: url('webFonts/MonoSpec-Regular/font.woff2https://static1.squarespace.com/static/5f27084b74011038bfe3bfb8/t/5f3d403a2dd86858ae580f20/1597849659484/font.woff2') format('woff2'), url('webFonts/MonoSpec-Regular/font.woffhttps://static1.squarespace.com/static/5f27084b74011038bfe3bfb8/t/5f3d403a2dd86858ae580f20/1597849659484/font.woff2') format('woff');
}

h1, h2, { 
	font-family: MonoSpec-Regular;
}
p {font-family: MonoSpec-Regular;
}

 

your code is invalid, edit this line

@font-face {
  font-family: 'MonoSpec-Regular';
  src: url('webFonts/MonoSpec-Regular/font.woff2https://static1.squarespace.com/static/5f27084b74011038bfe3bfb8/t/5f3d403a2dd86858ae580f20/1597849659484/font.woff2') format('woff2'), url('webFonts/MonoSpec-Regular/font.woffhttps://static1.squarespace.com/static/5f27084b74011038bfe3bfb8/t/5f3d403a2dd86858ae580f20/1597849659484/font.woff2') format('woff');
}

to this

@font-face {
  font-family: 'MonoSpec-Regular';
  src: url('https://static1.squarespace.com/static/5f27084b74011038bfe3bfb8/t/5f3d403a2dd86858ae580f20/1597849659484/font.woff2') format('woff2'), url('https://static1.squarespace.com/static/5f27084b74011038bfe3bfb8/t/5f3d403a2dd86858ae580f20/1597849659484/font.woff2') format('woff');
}

Thanks! That worked for me!