back to code snippets home

who we can help

To edit the text of the typewriter, just double click at it. This will bring up your EDIT HTML popup so you can make the changes you would like.

Instructions on Desktop :)

To edit the font style and size of the typewriter, just double click at it. This will bring up your EDIT HTML popup so you can make the changes you would like.

Instructions for your new

Animated Typewriter

The animation works on mobile automatically!

Congrats! Your Animated Typewriter effect should be setup. 🎉

----------

LICENSE / USAGE

You may use this code:
On unlimited personal or client projects
As part of websites you design

You may not:
Resell or redistribute the code as-is
Claim the code as your own creation

Option 1: Reference Fonts Already in Showit (Easiest)
If you've already added a custom font to your Showit site and are using it elsewhere:
Step 1: Find your font name

Create a text box in Showit with your custom font

Right-click on the page → "Inspect" (or "Inspect Element")
Look for font-family: in the code
Copy the exact font name you see

Step 2: Update the code
Find this line in the CSS:
--font-family: 'Arial, sans-serif';
Replace with your font name:
--font-family: 'YourFontName', Arial, sans-serif;
Example:
--font-family: 'Montserrat', Arial, sans-serif;
--font-family: 'Playfair Display', Georgia, serif;

Option 2: Use Google Fonts (Very Easy)

Step 1: Go to fonts.google.com

Step 2: Select your font and click "Get font" → "Get embed code"

Step 3: Copy the <link> code that looks like this:
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

Step 4: Add it to the TOP of your embed code, before <style>:
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

<style>
/* ===== CUSTOMIZATION ===== */
:root {
--font-family: 'Roboto', sans-serif;

Option 3: Upload Custom Font Files
If you have a font file (.woff, .woff2, .ttf):

Step 1: Upload your font file to Showit
Step 2: Get the direct URL to the font file
Step 3: Add this code at the TOP of the <style> section:
<style>
/* Load custom font */
@font-face {
font-family: 'MyCustomFont';
src: url('YOUR-FONT-FILE-URL.woff2') format('woff2'),
url('YOUR-FONT-FILE-URL.woff') format('woff');
font-weight: 400;
font-style: normal;
}

/* ===== CUSTOMIZATION ===== */
:root {
--font-family: 'MyCustomFont', Arial, sans-serif;
Replace:

'MyCustomFont' with any name you want
'YOUR-FONT-FILE-URL.woff2' with your actual font file URL
Use the same name in --font-family