Custom Font for text in Code Block

Hi Eveyrone,

I am trying to add a custom font to a code block that contains just text. There are four words in the ccode block that are rotated through using some CSS code. When I add in the font from google fonts and set it to all headings I.E. h3, all headings use the font but when I add in the code blocks ID to use the font, #block-yui_3_17_2_1_1700906193987_12449, it doesn't change the font for the text in the code block.

CSS Code to import the Google Font:

@import url('https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap');

CSS Code to update the text to use the font on all h3 headings. This works:

h3{font-family: 'Permanent Marker', cursive, !important;}

CSS Code to update the text to use the font on code block. This doesn't work adn what I want to work:

#block-yui_3_17_2_1_1700906193987_12449{font-family: 'Permanent Marker', cursive, !important;}

Code block code in #block-yui_3_17_2_1_1700906193987_12449:

<h3>
    <div class="fadeIn">
      <span>Heal</span>
      <span>Get Better</span>
      <span>Recover</span>
      <span>Live</span>
    </div>
  </h3>

CSS Code to rotate through and fade in each word in code block:

/*FadeIn*/
.fadeIn{
    display: inline;
    text-indent: 8px;
}
.fadeIn span{
    animation: fadeEffect 10.5s linear infinite 0s;
    -ms-animation: fadeEffect 10.5s linear infinite 0s;
    -webkit-animation: fadeEffect 10.5s linear infinite 0s;
    color: #C8A47E;
    opacity: 0;
    overflow: hidden;
    position: absolute;
}
.fadeIn span:nth-child(2){
    color: #C8A47E;
    animation-delay: 2.5s;
    -ms-animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s;
} 
.fadeIn span:nth-child(3){
    color: #C8A47E;
    animation-delay: 5s;
    -ms-animation-delay: 5s;
    -webkit-animation-delay: 5s;
}
.fadeIn span:nth-child(4){
    color: #C8A47E;
    animation-delay: 7.5s;
    -ms-animation-delay: 7.5s;
    -webkit-animation-delay: 7.5s;
}

/*FadeIn Animation*/
@-moz-keyframes fadeEffect{
    0% { opacity: 0; }
    5% { opacity: 0; -moz-transform: translateY(0px); }
    10% { opacity: 1; -moz-transform: translateY(0px); }
    25% { opacity: 1; -moz-transform: translateY(0px); }
    30% { opacity: 0; -moz-transform: translateY(0px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@-webkit-keyframes fadeEffect{
    0% { opacity: 0; }
    5% { opacity: 0; -webkit-transform: translateY(0px); }
    10% { opacity: 1; -webkit-transform: translateY(0px); }
    25% { opacity: 1; -webkit-transform: translateY(0px); }
    30% { opacity: 0; -webkit-transform: translateY(0px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@-ms-keyframes fadeEffect{
    0% { opacity: 0; }
    5% { opacity: 0; -ms-transform: translateY(0px); }
    10% { opacity: 1; -ms-transform: translateY(0px); }
    25% { opacity: 1; -ms-transform: translateY(0px); }
    30% { opacity: 0; -ms-transform: translateY(0px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}

URL: https://thebodytalktherapist.com

Password: PondokChandani

What am I missing above to get the font changed in the code block to use the downloaded Google Font? 

tia

Ian

H0 @Ian007, it's not working because the span tags are inside the h3 tag. 

In the code block, you can either replace <span> with <h3>

or update the below code from

#block-yui_3_17_2_1_1700906193987_12449{font-family: 'Permanent Marker', cursive, !important;}

to

#block-yui_3_17_2_1_1700906193987_12449 h3 span {
	font-family: 'Permanent Marker', cursive, !important;
}

Let me know how it goes.

Hi Melody,

Thanks for your help and reply. Much appreciated. When I add the code into the codeblock it is displayed as text on the web page. I have attached two screen scrapes of the updated code block and the web site. I have placed the code in many locations within the Code Block with the same result. Weird thing is ( werid for me anyway) is I can change the font for the text in all other blocks, code block or text, using their block ID, just not this one....

Gratefully,

Ian

46 minutes ago, Ian007 said:

Hi Melody,

Thanks for your help and reply. Much appreciated. When I add the code into the codeblock it is displayed as text on the web page. I have attached two screen scrapes of the updated code block and the web site. I have placed the code in many locations within the Code Block with the same result. Weird thing is ( werid for me anyway) is I can change the font for the text in all other blocks, code block or text, using their block ID, just not this one....

Gratefully,

 

Ian

Add should add the code on Custom CSS panel in Website > Utilities > Website Tools > Custom CSS.
Remove this code for the code block and add it on Custom CSS panel

#block-yui_3_17_2_1_1700906193987_12449 h3 span {
	font-family: 'Permanent Marker', cursive, !important;
}

Hi Web Solutions,

Thanks for you reply and help. Whilst the change didn't work it did help in that I was looking through the fade in code and realised that the location for the font family should be in the configuration section as per below. Thanks again for your suggestion to use the CSS. That pointed me in the right direction 👍

8 minutes ago, Ian007 said:

Hi Web Solutions,

Thanks for you reply and help. Whilst the change didn't work it did help in that I was looking through the fade in code and realised that the location for the font family should be in the configuration section as per below. Thanks again for your suggestion to use the CSS. That pointed me in the right direction 👍

Try with this code. Add this code in the very bottom on Custom CSS section.

.fe-block-yui_3_17_2_1_1700906193987_12449 .sqs-block-content .fadeIn span {
    font-family:  'Permanent Marker', cursive !important;
}