Jump to content

help with a custom font & assigning it to my Site title and Site Navigation page titles

Recommended Posts

I need help with a custom font & assigning it to my Site title and Site Navigation page titles (Home, Classes, About etc)

I have 2 fonts working on my site:

The font for paragraphs  is Cabin (from Squarespace's font library), and the  heading font is  is a Custom Adobe font (called DM Serif Display) which is was added by CSS code (shown below).

The custom  font is working as  heading font, but as it  is not listed or recognised (in site Styles > Fonts), it is impossible to use it in >Assign Styles because it is not recognised.

Can anyone help me so that it is recognised and does appear in the listed fonts? Or is it a code issue?

Thank you! Any help is much appreciated.


This is the CSS code I entered to change the heading font:



@font-face {

font-family: 'DMSERIFDISPLAY';

src: url(https://static1.squarespace.com/static/60e8b4390b0e7d095dcd1680/t/6401cec210a62123f2d39565/1677840066639/2.DMSerifDisplay-Regular.ttf);



h1 {

font-family: 'DMSERIFDISPLAY';}

h2 {

font-family: 'DMSERIFDISPLAY';}

h3 {

font-family: 'DMSERIFDISPLAY';}

h4 {

font-family: 'DMSERIFDISPLAY';}

Edited by Daleen
Link to comment
  • Replies 1
  • Views 698
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic


Custom Fonts won't appear in Site Styles List. You need to use custom code to assign it.

Can you share link to your site? We can give code easier

Or you can try this CSS code to assign custom font to site title + navigation (don't remove any code in your current code)

a#site-title, div.header-nav-item *, div.header-menu-nav-item * {
	font-family: 'DMSERIFDISPLAY' !important;


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.