How to add typing text effect in Google Sites

Typing text effect is used in a lot of modern looking websites and it really catches user attention. I personally love it and I thought it would be a good idea to somehow implement this typing text effect in google sites. Since I know most of the google sites users are not expert in coding and are looking for easy solutions that’s why I’ll do my best to keep things easy to follow and easy to implement. So here is how you can achieve this typing text effect in google sites:

There are two ways to implement the typing text effect in google sites. First one is to create a div and then create paragraphs inside it and then all those paragraph will be typed in the sequence they are created in. The second one is create a text like “I Love ” and then followed by a few strings or text like Google Sites, WordPress & React etc. I will show you how to create both.

Typing Text effect on a DIV with nested P elements

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<style>
span { color: #fff !important; text-align: center; font-size: 40px; }
* { max-width: 100vw; max-height: 100vh; }
</style>

<div id="typed-strings">
  <p>Do you love <strong>Google Sites</strong>?</p>
  <p>I <em>Love</em> Google Sites too.</p>
</div>
<span id="typed"></span>

<script>
  var typed = new Typed('#typed', {
    stringsElement: '#typed-strings',
    typeSpeed: 50,
    backSpeed: 50,
    loop: true,
    backDelay: 700
  });
</script>

Just change the text inside P element which is wrapped in a DIV tag with an ID of typed-strings and you are done. If you wanted to add new line just add a P tag just like the one I have created and put your text inside the P tags. You can use strong and em tags to change the appearance of the text. You can even use inline styling to change the colour, font-size, padding and margins etc of the text.

Typing Text effect on certain words or strings within a Paragraph

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<style>
* {max-width: 100vw; max-height: 100vh; }
</style>

<h3 style="color:#fff;font-size: 36px">I Love <span id="typed" style="color: #65ffea"></span> Tutorials.</h3>

<script>
  var typed = new Typed('#typed', {
    strings: ["Google Sites!", "Wordpress!", "React!"],
    typeSpeed: 50,
    backSpeed: 50,
    backDelay: 700,
    loop: true
  });
</script>

Just change the text “I Love ” and ” Tutorials” to whatever you like. And for the typing text or animated text just change the text inside square brackets [“Google Sites!”, “WordPress!”, “React!”] to whatever you like. If you wanted to increase or decrease the typing speed, the deletion speed then increase or decrease values next to typeSpeed: and backSpeed: respectively. And if you want a little delay after the typing just increase the value next to backDelay. And set the loop false if you wanted to play the typing text animation once or set it true if you want it to play forever.

How to change the font of the Typing Text

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Mystery+Quest&amp;family=Questrial&amp;display=swap" rel="stylesheet">
<style>
* {max-width: 100vw; max-height: 100vh; }
</style>

<h3 style="color:#fff;font-size: 36px;font-family: Questrial;">I Love <span id="typed" style="color: #65ffea;font-family: 'Mystery Quest';"></span> Tutorials.</h3>

<script>
  var typed = new Typed('#typed', {
    strings: ["Google Sites!", "Wordpress!", "React!"],
    typeSpeed: 50,
    backSpeed: 50,
    backDelay: 700,
    loop: true
  });
</script>

Some people in the comments on my youtube channel were asking about how to change the font of the typing text effect. Here is the updated code that show you how to change the font of the typing text effect. Simply get the font embed code from Google Fonts and place it at the top of the code as shown in the example above.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Mystery+Quest&amp;family=Questrial&amp;display=swap" rel="stylesheet">

Then simply apply the font to a specific tag like p, a, li, etc or as a whole using * to select everything. As you can see I have applied Questrial font on the h3 tag using inline styling

<h3 style="color:#fff;font-size: 36px;font-family: Questrial;">

and Mystery Quest font on the text with the typing text effect.

<span id="typed" style="color: #65ffea;font-family: 'Mystery Quest';"></span>