Adding a custom font using css - I'm stuck

Site URL: https://green-sepia-7az7.squarespace.com/

Hello all,

I'm setting up a website for a friend who purchased fonts for web use online in style with his webshop.

After reading through various posts I managed to upload the fonts and tried to follow the guidelins, but I'm completely stuck being a noob in programming. I've uploaded the otf files, but should I also upload the woff files? Where will they be stored? The main code I use to point at tthe woff2 files is coming from the font vendor, so that's probably to generic.

Looking forward to hearing your thought, tips and advice.

This is the code I'm using: (PS the pwd for the site is PleaseHelpMe

@font-face {
  font-family: "MoriGothic-Light";
  src: url('webFonts/MoriGothicLight/font.woff2') format('woff2'), url('webFonts/MoriGothicLight/font.woff') format('woff');
}
@font-face {
  font-family: "MoriGothic-Medium";
  src: url('webFonts/MoriGothicMedium/font.woff2') format('woff2'), url('webFonts/MoriGothicMedium/font.woff') format('woff');
}
@font-face {
  font-family: "MoriGothic-Regular";
  src: url('webFonts/MoriGothicRegular/font.woff2') format('woff2'), url('webFonts/MoriGothicRegular/font.woff') format('woff');
}
@font-face {
  font-family: "MoriGothic-SemiBold";
  src: url('webFonts/MoriGothicSemiBold/font.woff2') format('woff2'), url('webFonts/MoriGothicSemiBold/font.woff') format('woff');
}
@font-face {
  font-family: "MoriGothic-Bold";
  src: url('webFonts/MoriGothicBold/font.woff2') format('woff2'), url('webFonts/MoriGothicBold/font.woff') format('woff');
}
@font-face {
  font-family: "MoriGothic-ExtraLight";
  src: url('webFonts/MoriGothicExtraLight/font.woff2') format('woff2'), url('webFonts/MoriGothicExtraLight/font.woff') format('woff');
}
@font-face {
  font-family: "MoriGothic-Normal";
  src: url('webFonts/MoriGothicNormal/font.woff2') format('woff2'), url('webFonts/MoriGothicNormal/font.woff') format('woff');
  }
h1 {
font-family: 'MoriGothic-ExtraLight' !important;}
h2 {
font-family: 'MoriGothic-ExtraLight'!important;}
h3 {
font-family: 'MoriGothic-ExtraLight' !important;}
h4 {
font-family: 'MoriGothic-ExtraLight' !important;}
h5 {
font-family: 'MoriGothic-ExtraLight' !important;}
body {
font-family: 'MoriGothic-ExtraLight' !important;}
p {
font-family: 'MoriGothic-ExtraLight' !important;}
.sqsrte-large {
font-family: 'MoriGothic-ExtraLight' !important;}
.sqsrte-small {
font-family: 'MoriGothic-ExtraLight' !important;}

Normally, yes. When you upload a font to a web-project you'd have access to the file system which typically has a fonts folder.

However, in Squarespace you won't be able to import the font in the way that you are -- "webfonts/...".  -- Instead, you'll want to get the complete URL link and place it in your "@font-face" source.

@font-face {
font-family: "your-font-name-here";
src: url('complete-url-fills-in-here');
}
@font-face {
font-family: "your-font-name-here";
src: url('complete-url-fills-in-here');
}
@font-face {
font-family: "your-font-name-here";
src: url('complete-url-fills-in-here');
}

section[data-section-id="your-ID-#"] {
h1,h2,h3,p {
font-family: "your-font-name-here";
	}
}

Following this format should get you up and running.

Thanks, What should I enter in the your-id part?

section[data-section-id="your-ID-#"] {
h1,h2,h3,p {
font-family: "your-font-name-here";
	}
}

This is what the code looks like now, I've uploaded the woff en woff2 fotn files to my own webserver

@font-face {
  font-family: "MoriGothic-ExtraLight";
  src: url('http://mr-info.be/webfonts/MoriGothicExtraLight/font.woff2') format('woff2'), url('http://mr-info.be/webfonts/MoriGothicExtraLight/font.woff') format('woff');
}

section[data-section-id="your-ID-#"] {
h1,h2,h3,p {
font-family: "MoriGothic-ExtraLight";
    }
}