Jump to content

How to change site title to use custom font?

Recommended Posts

  • 3 months later...

Hey - try this below

Add the font first. (Download the otf file and add to custom css/ file manager). In the code below: change 'Example' to your font name you want to use.

 font-family: 'Example';
 src:local('Example'), url(http://static1.squarespace.com/static/5683f9f1cbced6d45d92de3d/t/56855928e0327c02e3702e57/1451579688037/Example.otf);

Once you have the font installed like above, apply it to your Site Title in the navbar( aka. header)

#site-title {font-family: 'Example'; src:local('Example'), url(http://static1.squarespace.com/static/5683f9f1cbced6d45d92de3d/t/56855928e0327c02e3702e57/1451579688037/Example.otf)}

Hope it helps. Cheers

Edited by Tamas
Link to comment
  • 9 months later...
  • 1 year later...

I'm new to css also and searched multiple forums. I found this solution by inspecting my squarespace webpage on google. It worked for me!

1.Copy and paste

@font-face { font-family: 'GeosansLight';

src: url('https://static1.squarespace.com/static/5a8c34eb51a584a57bc62511/t/5a93aadff9619a83af6f6839/1519626975231/GeosansLight.ttf ');

font-weight: normal;

font-style: normal; }

.has-site-title .Header-branding { font-family: "GeosansLight"; }

2.Changes you need to make for this to work--> a. upload your own font on 'manage custom file' and obtain 'src: url' by clicking on uploaded font file title. b. change 'font-family' and 'src: url'

Link to comment
  • 2 years later...
1 hour ago, lumaoquendo said:

Hey guys! I used this code to change my Logo font at Squarespace, however at the mobile it keeps same wrong font. Is there any aditional code for changing at the mobile as well?


Each template uses different code for site title/logo. Can you share link to your site?

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
  • 2 years later...
On 12/31/2015 at 6:36 AM, Guest Tamas said:
#site-title {font-family: 'Example'; src:local('Example'), url(http://static1.squarespace.com/static/5683f9f1cbced6d45d92de3d/t/56855928e0327c02e3702e57/1451579688037/Example.otf)}

I realize this post is quite old, but figured others might find it while searching for an answer to this like I did. On my Squarespace 7.1, all I needed was the first part of this code and the uploaded font, making sure to reference the font exactly as the filename shows it in the font upload. The custom font CSS I used was also slightly different. I'll include both code snippets below in case it helps anyone using 7.1! Be sure to replace "fontfilename" in all instances with the name of the font file exactly as shown in the file upload (so whatever name comes before the .otf).

//Add custom font to site title//

#site-title {font-family: 'fontfilename';

//Custom font//

@font-face {
  font-family: fontfilename;
  src: url(put your URL here);

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.