Jump to content

Adding a custom font using css - I'm stuck

Recommended Posts

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;}

2021-09-25_06h58_29.png

Link to comment
  • Replies 3
  • Views 372
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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.

Link to comment

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";
    }
}

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.