*2022 update* The Showit code sometimes doesn’t work – I am unsure why. I’ve played around with it, but am not a coding expert and can’t seem to get it right. SORRY! Here’s a different tutorial about how to get the animated typing text to your Showit website. If you prefer the scrolling text effect, watch THIS VIDEO (both by Davey & Krista).

Free Training

What better way to celebrate my 150th blog post then with some of my all time FAVORITE codes! These will work on Squarespace or Showit. Enjoy friends!

Code used on Squarespace website page:

---

<div class="typeit"> ACCOUNTING AND BOOKKEEPING FOR SMALL BUSINESSES</div>

WOHOOO! Now go to Custom CSS and enter this snippet of code:

.typeit {
  overflow: hidden; 
  font-size:25px; /* this can be any font size you want */

  border-right: 2px solid #e37263; /* change this color in the keyframe too */

  white-space: nowrap; 
  margin: 0 auto; 
  animation: 
    typeit 3.5s steps(40, end),
    right-border .5s step-end infinite;
}

@keyframes typeit {  
from { width: 0 }
to { width: 100% }
}

@keyframes right-border {
from, to { border-color: transparent }
50% { border-color: #e37263; /* change this in the CSS above too */ }
}
@media only screen and (max-width: 640px){ .typeit { font-size:13px!important; }}

Code used on Showit website page:

---

<div class="si-embed">
<div id="container">
<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>

<span class="Typewriter__wrapper"></span><span class="Typewriter__cursor">|</span></div>
<style>@font-face {
  font-family: Tenez Light;
  src: url(https://static.showit.co/file/iauDA5AXSZa1thgAhLruPw/99642/tenez_light-webfont.woff);
}</style>

<script>var container = document.getElementById('container');

var typewriter = new Typewriter(container, {
    loop: false,
});

container.style.font = "normal 30px Tenez Light"
container.style.color = "#3e3d3b"
container.style.textAlign = "center"
container.style.lineheight = "1.6"

typewriter.typeString('Website Designer')
    .pauseFor(1000)
    .deleteAll()
    .typeString('Brand Strategist')
    .pauseFor(1000)
    .deleteAll()
    .typeString('Squarespace Educator')
    .pauseFor(1000)
    .deleteAll()
    .typeString('New Entrepreneur Helper')
    .start();
</script></div>

A FEW THINGS I WANT TO ADD…

Anywhere you see “Tenez Light” you will replace with your font name and make sure (as I showed in the video) that you replace the woff file URL with YOUR FONT URL. So you will be replacing Tenez Light in TWO different spots in that long code as well as the URL.

YOU CAN ACHIEVE THIS ON SQUARESPACE TOO!

Just change out the Source URL from the Showit URL to your fonts URL. You can get that by going to Design – Custom CSS – Manage Custom Files – Upload your font – Go to the bottom of your Custom CSS and click enter to get a new space – click manage custom files again – click on the font (this will get the URL) – copy that URL. Then you go back to your code block and paste in that URL replacing the WOFF file. You don’t need to change the “Tenez Light” in the code.

Want another scrolling text variation for your Squarespace website?

---

Watch Inside The Square (aka Becca’s) tutorial for another scrolly text variation (versus the typewriter version which mine had)!

Freebies

THE SIMPLE PROCESS TO DIY YOUR SITE ↓

Squarespace Coding Resource ↓

If you found this post helpful, pin the blog and share the love 💕!