How To Upload Custom Fonts To Squarespace

Squarespace is a website edifice platform with an extensive collection of fonts that you lot're able to use straight away. Just if you lot have existing make fonts or prefer something that isn't on Squarespace, you'll desire to install a custom font. Luckily, this isn't very difficult!

Upload Your Custom Font

To upload your custom font to Squarespace, you're commencement going to locate the font file. This file is normally the championship of your font and ends with OTF, WOFF or TTF.

In your Squarespace menu, click Design > Custom CSS
Gyre down and discover the button that says Mange Custom Files .
Click Add Images or Fonts , and select your font file from the window that pops up.

How to Upload a Custom Font in Squarespace

Now you'll demand to copy and paste this CSS into the Custom CSS expanse.

@font-confront { font-family: YOURFONT; src: url(); }

Where it says YOURFONT , replace it with the name of your custom font. You can cull any name for this, just brand sure that yous retrieve the spelling every bit you'll need to repeat this subsequently on.

The next pace is to add the URL of your font right betwixt the two brackets () .

Whenever you upload a file inside Squarespace, it generates a URL for that file. This is the link that yous'll demand to identify inside the brackets.

To insert this link, start click on the space between the brackets, and the select your uploaded font from the Mange Custom Files card. The URL will automatically be added – and volition look something similar this:

@font-face {     font-family: DM Sans;   src: url(https://static1.squarespace.com/static/5e6a13436c6599388885b79d/t/5ee0d6ea3688515b59f562c1/1591793386569/DMSans-Regular.ttf);   }

Employ Your Custom Font

We're well-nigh done! All that'south left to practise is choose which Headings or Paragraphs your font will apply to.

In Squarespace 7.0, in that location'southward 4 different Headings/Paragraphs y'all can change to your custom font. These are:

Heading Ane h1
Heading Two h2
Heading Three h3
Paragraph p

In Squarespace 7.1, there'southward vii dissimilar Headings/Paragraphs you can change to your custom font. These are:

Heading One h1
Heading 2 h2
Heading Three h3
Heading Four h4
Paragraph One .sqsrte-large
Paragraph Two p
Paragraph Three .sqsrte-small

The sheer number of font choices is 1 of the many reasons why I recommend Squarespace 7.1 over 7.0!

Make up one's mind which Headings/Paragraphs yous want to switch to your custom font, and copy and paste the advisable CSS snippets.

h1 { font-family: 'YOURFONT'; }  h2 { font-family: 'YOURFONT'; }  h3 { font-family: 'YOURFONT'; }  h4 font-family: 'YOURFONT'; }  .sqsrte-large { font-family: 'YOURFONT'; }  p { font-family: 'YOURFONT'; }  .sqsrte-small { font-family: 'YOURFONT'; }

Replace YOURFONT with the proper noun of your font – y'all entered this earlier in the beginning piece of CSS. Information technology doesn't matter what they're called, only make sure they're both spelled the same otherwise the CSS won't work.

Style Your Custom Fonts

Yous might exist tempted to utilize CSS to style other parts of the font as well (for example, size, weight, alphabetic character spacing), simply I would recommend irresolute these in the Squarespace font settings rather than adding CSS. If there's i rule of CSS, it's to avoid using it if you lot don't need likewise!

That said, in that location are some cases where styling your font with CSS is unavoidable. In Squarespace, whatever styling y'all apply to one Heading must apply to them all. The aforementioned goes for Paragraphs. Even if you don't use your own custom font, this tin can be limiting in terms of blueprint.

For example, I style Paragraph 1 with capitalisation and letter spacing - simply if I were to use these settings in Squarespace normally, all of my paragraph text would wait like this:

Hither is my Paragraph One styling.

Instead, I utilize CSS to target ONLY Paragraph One and add my letter of the alphabet spacing and capitalisation.

.sqsrte-large {   font-weight: 600;   letter-spacing: 0.1em;   text-transform: uppercase; }

"Do NOT alter your font size with CSS. Yous can already do this individually with the native settings, and your CSS will override it unnecessarily. This will exist annoying when you endeavor to change the font size in Squarespace a few months downward the line and it doesn't work!"

Apply Your Custom Fonts in Other Places

If you lot have a custom font, information technology'south probable you will want to use it in other places likewise the standard text boxes. For example, within your Site Header or the Quote Cake. I've compiled a small list of CSS snippets so you can change the fonts of these items as well.

How to Modify the Site Header Fonts on Squarespace

The site header is the navigation bar at the top of your Squarespace website. Depending on your settings, you might have lots of links, a text logo and an proclamation bar above all of this. You lot tin change all these fonts to your custom font with the CSS snippets beneath.

// Site Title // .header-title-text a {   font-family unit: YOURNAME !of import; }  // Site Navigation // .header-nav-item a {   font-family unit: YOURNAME !important; }  // Button // .header-deportment-activeness .btn {   font-family unit: YOURNAME !of import; }  // Announcement Bar // .sqs-announcement-bar-url a {   font-family: YOURNAME !of import; }

Replace YOURFONTFAMILY with the name of your chosen font.

How to Change the Button Fonts on Squarespace

Squarespace has lots of different buttons, and the most mutual are the Small, Medium and Large variations of the Push button Cake. Squarespace also allows y'all to add together buttons to your Epitome Blocks - all of these have unlike CSS snippets to change the font.

Custom Font for Squarespace Buttons and Image Button

// Small Push button // .sqs-block-push-element--small {   font-family: YOURNAME !of import; }  // Medium Button // .sqs-block-button-element--medium {   font-family unit: YOURNAME !important; }  // Large Button // .sqs-block-button-chemical element--large {   font-family: YOURNAME !important; }  // Image Block Button // .prototype-push button a { font-family: YOURNAME !important; }

Replace YOURFONTFAMILY with the name of your called font.

How to Change the Newsletter Block Fonts on Squarespace

The Newsletter Block allows people to sign up to your email listing via Mailchimp or Squarespace Email Campaigns. I'm not a fan of either service and prefer using Flodesk, simply the Newsletter Cake is easier to setup and a better option for beginners.

// Newsletter Grade Title // .newsletter-form-header-title {   font-family: YOURNAME !of import; }  // Newsletter Form Description // .newsletter-form-header-description p {   font-family: YOURNAME !important; }  // Newsletter Class Fields // .newsletter-form-field-element {   font-family unit: YOURNAME !important; }  // Newsletter Class Button // .newsletter-form-push button {   font-family: YOURNAME !of import; }  // Newsletter Form Footnote // .newsletter-form-footnote {   font-family: YOURNAME !important; }

Replace YOURFONTFAMILY with the name of your called font.

How to Change the Weblog Post Fonts on Squarespace

If yous have a web log on Squarespace, there are multiple places where your custom font volition need to be applied. This include the blog page titles and descriptions and the mail titles on the article pages themselves.

// Web log Page Post Title // .blog-championship {   font-family unit: YOURNAME !important; }  // Blog Folio Postal service Descriptions // .blog-excerpt p {   font-family unit: YOURNAME !of import; }  // Blog Page Read More Link // .blog-more-link {   font-family: YOURNAME !of import; }  // Blog Mail Entry Titles //  .weblog-detail-title h1.entry-title {   font-family: YOURNAME !of import; }

Replace YOURFONTFAMILY with the proper noun of your called font.

How to Change the Quote Cake Fonts on Squarespace

The Quote Block is a useful cake which allows you to enlarge and highlight certain quotes or phrases from your website. This tin be corking for showcasing customer testimonials, specially if you take a beautiful custom font that looks great at larger sizes.

Custom Font for Squarespace Quote Block.pngCustom Font for Squarespace Quote Block

// Quote Text // .sqs-cake-quote blockquote {   font-family: YOURNAME !important; }  // Quote Source // .sqs-block-quote .source {   font-family: YOURNAME !important; }

Replace YOURFONTFAMILY with the proper name of your chosen font.