Hello! I’m a first time coder and am applying the typewriter effect to my page. I got everything to work (very exciting), but when I try to change the font, most fonts don’t seem to work. I want to use Mr De Haviland or something similar/script like. Can anyone please advise? This is the code I’m using:
/* GLOBAL STYLES */ body { background:#FFFFFF; padding-top: 5em; display: flex; justify-content: center; }/* DEMO-SPECIFIC STYLES /
.typewriter p {
color: #FF4040;
font-family: ‘Mr De Haviland’;
overflow: hidden; / Ensures the content is not revealed until the animation /
border-right: .15em solid white; / The typwriter cursor /
white-space: nowrap; / Keeps the content on a single line /
margin: 0 auto; / Gives that scrolling effect as the typing happens /
letter-spacing: .15em; / Adjust as needed */
animation:
typing 2.0s steps(30, end),
blink-caret .5s step-end infinite;
}
/* The typing effect */
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
/* The typewriter cursor effect */
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: white }
}
Exquisite prose.