Jump to content

Monospace custom font

Go to solution Solved by tuanphan,

Recommended Posts

  • Solution

Add to Design > Custom CSS

/* monospace */
pre code {
	font-family: futura-pt !important;
}

Replace futura-pt with your custom font

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 year later...
21 hours ago, SuperBonjour said:

is there another way to do this? i didn't succeed.... 

Can you share link to page where you use monospace & which exact code did you add?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
On 9/13/2022 at 10:30 AM, jorgiabrows said:

I can't get that to above css to work for my monospace font. Anyone able to assist?

 

Can you share link to your site? We can check it easier

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 10 months later...
On 9/2/2022 at 5:20 AM, SuperBonjour said:

is there another way to do this? i didn't succeed.... 

Hello, 

I stumbled upon this trying to find a way to replace monospace with my custom font because the descriptions of photos in a gallery are in monospace by default. I added the snippet of code and replaced futura-pt with my custom font, but it didn't work. Can anyone help with this? 

Link to comment
10 hours ago, apesma said:

Hello, 

I stumbled upon this trying to find a way to replace monospace with my custom font because the descriptions of photos in a gallery are in monospace by default. I added the snippet of code and replaced futura-pt with my custom font, but it didn't work. Can anyone help with this? 

What is your site url & Which exact code did you use?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 8/3/2023 at 1:44 AM, apesma said:

My site url is https://www.aristidispesmazoglou.com/photos, and here is the code I used: 

/* monospace */
pre code {
	font-family: futura-pt !important;
}

With Gallery Caption, you need to use this code

.gallery-caption p.gallery-caption-content {
    font-family: futura-pt !important;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
On 8/6/2023 at 12:16 PM, tuanphan said:

With Gallery Caption, you need to use this code

.gallery-caption p.gallery-caption-content {
    font-family: futura-pt !important;
}

 

Sorry for the late reply. It worked, thanks! I have one more question. When I access my website from a phone, the navigation menu font does not change to my custom font. Do you have any suggestions?

Link to comment
16 hours ago, apesma said:

Sorry for the late reply. It worked, thanks! I have one more question. When I access my website from a phone, the navigation menu font does not change to my custom font. Do you have any suggestions?

Use this

div.header-menu-nav-item * {
    font-family: futura-pt !important;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
16 hours ago, Goood_Studio said:

Hello.

The pre code worked for me but when I reduce the font size the line height stays large. I've tried adding {line-height:normal !important;} but it makes no difference.

 

Here's the page: www.unthinkabledigital.co.uk/case-studies/heart-n-soul

You can use a specific value

line-height: 20px !important;

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
1 hour ago, tuanphan said:

You can use a specific value

line-height: 20px !important;

Thanks tuanphan but when I bring the font size down below 20px the line height doesn't change?

This is what I'm using:

pre code {
font-family: futura, sans-serif !important;
  font-size: 15px !important;
line-height: 5px !important;
}

 

Here's the page: www.unthinkabledigital.co.uk/case-studies/heart-n-soul

Link to comment
On 10/19/2023 at 3:42 PM, Goood_Studio said:

Thanks tuanphan but when I bring the font size down below 20px the line height doesn't change?

This is what I'm using:

pre code {
font-family: futura, sans-serif !important;
  font-size: 15px !important;
line-height: 5px !important;
}

 

Here's the page: www.unthinkabledigital.co.uk/case-studies/heart-n-soul

Use this

pre code {
    font-family: futura,sans-serif !important;
    font-size: 15px !important;
}
pre {
    line-height: 15px !important;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 weeks later...

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.