# Amazing Multiple Font Animation
**Hello guys, today I am going to show you how to create amazing multiple font animation.**
###Multiple Font Animation step by step
#### Step 1 — Creating a New Project
The first thing we’ll do is create a folder that will contain all of the files that make up the project. Create an empty folder on your devices and name it “ Multiple Font Animation”.
Open up [Visual Studio Code](https://code.visualstudio.com/) or any Text editor, and create files(index.html, style.css, main.js) inside the folder. for creating font animation. In the next step, you will start creating the structure of the webpage.
#### Step 2 — Setting Up the basic structure
In this step, we will add the HTML code to create the basic structure of the project.
```html
Multiple font animation
```
This is the base structure of most web pages that use HTML.
Add the following code inside the `` tag:
```html
STACKFINDOVER
```
#### Step 3 — Adding Styles for the Classes
In this step, we will add styles to the section class Inside style.css file
```css
* {
padding: 0;
margin: 0;
}
body {
height: 100vh;
width: 100%;
background: #4b00ff;
color: #fff;
overflow: hidden;
font-family: 'Encode Sans SC', sans-serif;
}
.container {
width: 90%;
margin: auto;
height: 100%;
}
.anim-heading {
font-size: 5rem;
display: flex;
align-items: center;
justify-content: center;
column-gap: 20px;
height: 100%;
}
```
#### Step 4 — Adding some lines of JavaScript code
In this step, we will add some JavaScript code to create random font animation.
```js
const fonts = [
'Encode Sans SC',
'Roboto',
'Tourney',
'Ubuntu',
'Zen Tokyo Zoo',
];
const letters = document.querySelectorAll(".letter");
let count = 0;
const fontAnim = () => {
letters.forEach(letter => {
let randomFontIndex = Math.floor(Math.random() * fonts.length);
let randomFont = fonts[randomFontIndex];
letter.style.fontFamily = randomFont;
});
}
let fontAnimation = setInterval(function() {
fontAnim();
clearInterval(fontAnimation);
}, 100)
```
### You may like this also
[15 Best CSS Accordion Designs You’ve Never 👀 Seen Before](https://blog.stackfindover.com/best-css-accordion-designs-you-have-never-seen-before/)