Monospace custom font

Dear Community,

does someone know how to apply a custom font to the Monospace?

I was able to successfully apply my custom font to the Headline and Paragraph font, though not on Monospace.

Anyone has a clue?

Thanks!

@tuanphan thanks! Is it also possible to change the font size? Because the standard monospace font size has the same size as p2, though I'd like to have the p3 size - is that possible? 

add font-size: 20px !important;

@tuanphan that's perfect, thank you for all your help.

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

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?

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

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

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? 

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?

8 hours ago, tuanphan said:

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

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

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

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

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?

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

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

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;

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

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

On 10/21/2023 at 7:55 AM, tuanphan said:

Use this

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

 

Thanks! Worked a treat