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
