I have used the following snippet from another tutorial to add a typewriter affect to my site, and it looks great. However, the font isn’t loading on mobile. Can someone take a look at my code and see why this might be happening?
Thank you!
<html>
<head>
<style>
/* Global */
html{
min-height: 100%;
overflow: hidden;
}
body{
height: calc(100vh - 8em);
color: #000000;
font-family: poppins-extralight,poppins,sans-serif;
letter-spacing: .15em;
font-size:21px;
background-color: #F2F1F2;
}
.line-1{
position: relative;
top: 50%;
width: 24em;
margin: 0 auto;
border-right: 1px solid rgba(255,255,255,.75);
font-size: 180%;
text-align: center;
white-space: nowrap;
overflow: hidden;
transform: translateY(-50%);
}
/* Animation */
.anim-typewriter{
animation: typewriter 2s steps(44) 1s 1 normal both,
blinkTextCursor 500ms steps(44) 0 infinite normal;
-webkit-animation: typewriter 2s steps(44) 1s 1 normal both,
blinkTextCursor 500ms steps(44) 0 infinite normal;
-moz-animation: typewriter 2s steps(44) 1s 1 normal both,
blinkTextCursor 500ms steps(44) 0 infinite normal;
-o-animation: typewriter 2s steps(44) 1s 1 normal both,
blinkTextCursor 500ms steps(44) 0 infinite normal;
}
@keyframes typewriter{
from{
width: 0;
}
to{
width: 24em;
}
}
@-webkit-keyframes typewriter{
from{
width: 0;
}
to{
width: 24em;
}
}
@-moz-keyframes typewriter{
from{
width: 0;
}
to{
width: 24em;
}
}
@-o-keyframes typewriter{
from{
width: 0;
}
to{
width: 24em;
}
}
@keyframes blinkTextCursor{
from{
border-right-color: rgba(255,255,255,.75);
}
to{
border-right-color: transparent;
}
}
@-webkit-keyframes blinkTextCursor{
from{
border-right-color: rgba(0,0,0,.75);
}
to{
border-right-color: transparent;
}
}
@-moz-keyframes blinkTextCursor{
from{
border-right-color: rgba(255,255,255,.75);
}
to{
border-right-color: transparent;
}
}
@-o-keyframes blinkTextCursor{
from{
border-right-color: rgba(255,255,255,.75);
}
to{
border-right-color: transparent;
}
}
</style>
</head>
<body>
<section class="cd-intro">
<div id="app"></div>
</section>
<script src='https://cdnjs.cloudflare.com/ajax/libs/TypewriterJS/1.0.0/typewriter.js'></script>
<script>
var app = document.getElementById('app');
var typewriter = new Typewriter(app, {
loop: true
});
typewriter.typeString('accelerating B2B commerce.')
.pauseFor(2500)
.deleteAll()
.typeString('creating frictionless experiences.')
.pauseFor(2500)
.deleteAll()
.typeString('automating for the new normal.')
.pauseFor(2500)
.start();
</script>
</body>
</html>