Animated Text Generator

Q: Why is the text not moving on my screen?

Press Play. Nothing moves until you do. If a loop then plays once and stops, your device is set to reduce motion. The switch is in your device's accessibility settings. Turn it off, press Play again and the loop keeps running.

Type a line, choose how it moves and press Play, then save a short video or copy the CSS.

Your text up to 120 characters

This is a sample. Type your own to replace it.

Wave motion. Fredoka, drop shadow look, purple.

Motion

Font

Look

More options

Speed

Gap between letters

Colours

Strength of the look

Background

Letter colour

What you type is kept in this browser, so it is here when you come back. Nothing is sent to us.

Next step Bend the line into an arc

How it works

Type a line, press Play and watch it move. This animated text generator has 26 motion presets, from a quiet Fade in to Flame colours, and each one plays on your own words in the font and look you choose. Leave with a looping video clip, or with the CSS that draws the same motion on your own page. It does not make GIFs.

Read the full guide

Type, pick a preset, press play

Type up to four lines, then pick a preset from the four groups in the Motion menu: reveals that play once, loops that move, light and colour, and glitches. Nothing moves until you press Play. Each preset suggests a font, a look and a background, and Use the look made for this motion applies them. Speed runs from half to double. Gap between letters sets the delay between neighbours, the whole difference between a line that jumps and a Wave. Pause stops everything at once.

Choose for where the words will live

For a web page, press Copy CSS. Every preset is under a kilobyte, stays sharp at any size, and switches itself off for visitors who have asked their device for less motion. For a chat or a slide, press Download video. Reveals such as Typewriter and Rise suit a title that arrives once. Loops such as Wave and Float suit a sticker or a banner. One rule for your own page: under the WCAG guidelines, motion that starts by itself and runs past five seconds needs a pause control.

Save a clean loop, share the settings

A looping clip only looks seamless if it ends where it began. The recorder waits until every letter has started, then captures exactly one cycle, so Wave records 1.2 seconds however long the line is. Reveals record the whole entrance plus a short hold. Keep this design saves your words and settings in this browser, never the video. Share link copies a link to them, or opens a phone's share menu. Whoever opens it must press Play. For flames that stay still, the fire text generator is next door.

Tips

Long line? Pick Rise or Fade in. Bounce or Spin on forty letters is a great deal of movement and very little reading.
Colour cycle and Rainbow wave rotate the colour you start with, so black, white and grey text will not change at all. Start from red or magenta.
For an animated fire text generator, pick Flame colours under Motion and press Use the look made for this motion. That sets Bangers, the Fire look, Flame under Colours and a Black background. Thin letters leave flames nowhere to sit.
Shake and Glitch jitter are hard on some readers. Keep them for a clip of a few seconds, not for a heading people must read.
Neon flicker and Flame colours will not speed up past normal: both already dim twice in their busiest second, and three is the limit.

Questions and answers

How does the animated text generator work?

Each preset is a short list of numbers that the preview plays on your words. The numbers say what moves: a letter, a word or the whole line. They set how long one cycle lasts and the delay between neighbours. Stops along the cycle give position, scale, opacity, blur or colour. The CSS you copy comes from the same numbers, so the clip and the code are one motion.

Why does it save a video and not a GIF?

A GIF would turn every glow and gradient here into bands. Its frames hold at most 256 colours and cannot be partly transparent. So the tool records the preview as a video. Some browsers write WebM and others MP4, so the tool checks yours and names the file to match.

Why is the text not moving on my screen?

Press Play. Nothing moves until you do. If a loop then plays once and stops, your device is set to reduce motion. The switch is in your device's accessibility settings. Turn it off, press Play again and the loop keeps running.

Can the clip have a transparent background?

No. The tool paints a solid background before it records, because it cannot promise a transparent video will play wherever you send it. Pick a Background that matches where the clip will sit. With the CSS, the letters move over whatever is behind them on your page.

How do I use the copied CSS on my own page?

Put the preset's class on the paragraph, wrap each letter in a span with the class wf-u, and number the spans with the custom property --i, starting at 0. The CSS multiplies --i by the gap to stagger the letters. Copy HTML does all of this for you, and adds one plain copy of the words for screen readers while hiding the letter spans from them.

All 26 motion presets, with their CSS

Reveals that play once

Typewriter. Letters appear one at a time, 90 milliseconds apart, behind a blinking caret, with no fade at all. Plays once and holds. Made for a typewriter face such as Courier Prime, though any font works.

CSS of Typewriter

.wf-typewriter .wf-u {
  display: inline-block;
  white-space: pre;
  animation: wf-typewriter 90ms step-end both;
  animation-delay: calc(var(--i) * 90ms);
}
@keyframes wf-typewriter {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.wf-typewriter::after {
  content: '';
  display: inline-block;
  width: 0.08em;
  height: 1em;
  margin-left: 0.05em;
  vertical-align: -0.12em;
  background: currentColor;
  animation: wf-typewriter-caret 1060ms step-end infinite;
}
@keyframes wf-typewriter-caret {
  0% { opacity: 1; }
  50% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wf-typewriter .wf-u, .wf-typewriter::after { animation: none; }
}

Fade in. Each letter fades up from nothing, left to right. The quietest preset here and the safest for a heading, because nothing moves.

CSS of Fade in

.wf-fade-in .wf-u {
  display: inline-block;
  white-space: pre;
  animation: wf-fade-in 600ms ease-out both;
  animation-delay: calc(var(--i) * 50ms);
}
@keyframes wf-fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .wf-fade-in .wf-u { animation: none; }
}

Rise. Letters slide up a little over half their height while they fade in. It reads as modern and calm, and it suits long lines better than the bouncier reveals.

CSS of Rise

.wf-rise .wf-u {
  display: inline-block;
  white-space: pre;
  animation: wf-rise 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i) * 45ms);
}
@keyframes wf-rise {
  0% { transform: translate(0em, 0.6em); opacity: 0; }
  100% { transform: translate(0em, 0em); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .wf-rise .wf-u { animation: none; }
}

Drop in. Letters fall from above the line, overshoot by a fraction and settle. Best with a heavy rounded face, which looks as if it has weight to drop.

CSS of Drop in

.wf-drop-in .wf-u {
  display: inline-block;
  white-space: pre;
  animation: wf-drop-in 700ms ease-in both;
  animation-delay: calc(var(--i) * 60ms);
}
@keyframes wf-drop-in {
  0% { transform: translate(0em, -1.2em); opacity: 0; }
  60% { transform: translate(0em, 0.12em); opacity: 1; }
  80% { transform: translate(0em, -0.05em); opacity: 1; }
  100% { transform: translate(0em, 0em); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .wf-drop-in .wf-u { animation: none; }
}

Pop. Each letter grows from a point and overshoots its full size before it settles, because the easing curve runs past 1. Good for one loud word.

CSS of Pop

.wf-pop .wf-u {
  display: inline-block;
  white-space: pre;
  animation: wf-pop 500ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(var(--i) * 50ms);
}
@keyframes wf-pop {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .wf-pop .wf-u { animation: none; }
}

Focus pull. Letters start as a blur and sharpen into place, like a lens finding focus. Blur is costly to draw, so long text may stutter on an old phone.

CSS of Focus pull

.wf-focus-pull .wf-u {
  display: inline-block;
  white-space: pre;
  animation: wf-focus-pull 900ms ease-out both;
  animation-delay: calc(var(--i) * 40ms);
}
@keyframes wf-focus-pull {
  0% { opacity: 0; filter: blur(0.4em); }
  100% { opacity: 1; filter: blur(0em); }
}
@media (prefers-reduced-motion: reduce) {
  .wf-focus-pull .wf-u { animation: none; }
}

Wide to tight. The whole line starts with wide gaps between its letters and closes up as it fades in, the way a film title does. It needs room at the sides, so keep the text short.

CSS of Wide to tight

.wf-wide-to-tight {
  display: inline-block;
  animation: wf-wide-to-tight 1000ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes wf-wide-to-tight {
  0% { opacity: 0; letter-spacing: 0.6em; }
  100% { opacity: 1; letter-spacing: 0em; }
}
@media (prefers-reduced-motion: reduce) {
  .wf-wide-to-tight { animation: none; }
}

Flip up. Each letter stands up from the baseline as if hinged along its foot, like a split-flap board. Tall narrow faces show it best.

CSS of Flip up

.wf-flip-up .wf-u {
  display: inline-block;
  white-space: pre;
  transform-origin: 50% 100%;
  animation: wf-flip-up 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i) * 50ms);
}
@keyframes wf-flip-up {
  0% { transform: scale(1, 0); opacity: 0; }
  100% { transform: scale(1, 1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .wf-flip-up .wf-u { animation: none; }
}

Swing in. Letters swing down from a pin at the top, pass the vertical twice and come to rest, like a row of shop signs in a draught.

CSS of Swing in

.wf-swing-in .wf-u {
  display: inline-block;
  white-space: pre;
  transform-origin: 50% 0%;
  animation: wf-swing-in 800ms ease-out both;
  animation-delay: calc(var(--i) * 60ms);
}
@keyframes wf-swing-in {
  0% { transform: rotate(-25deg); opacity: 0; }
  40% { transform: rotate(8deg); opacity: 1; }
  70% { transform: rotate(-3deg); opacity: 1; }
  100% { transform: rotate(0deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .wf-swing-in .wf-u { animation: none; }
}

Slide in. Whole words arrive from the left, one after another. It is the only reveal here that moves by the word, so a phrase of three or four words shows it off and a single word barely does.

CSS of Slide in

.wf-slide-in .wf-u {
  display: inline-block;
  white-space: pre;
  animation: wf-slide-in 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i) * 120ms);
}
@keyframes wf-slide-in {
  0% { transform: translate(-1.5em, 0em); opacity: 0; }
  100% { transform: translate(0em, 0em); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .wf-slide-in .wf-u { animation: none; }
}

Loops that move

Wave. Every letter rises and falls by a third of its height, each one 80 milliseconds behind its neighbour, so a ripple runs along the word. The opening preset on this page.

CSS of Wave

.wf-wave .wf-u {
  display: inline-block;
  white-space: pre;
  animation: wf-wave 1200ms ease-in-out infinite both;
  animation-delay: calc(var(--i) * 80ms);
}
@keyframes wf-wave {
  0%, 100% { transform: translate(0em, 0em); }
  50% { transform: translate(0em, -0.3em); }
}
@media (prefers-reduced-motion: reduce) {
  .wf-wave .wf-u { animation: none; }
}

Bounce. Letters jump half their height and squash slightly when they land. The squash is what separates it from Wave: it looks like rubber, not water.

CSS of Bounce

.wf-bounce .wf-u {
  display: inline-block;
  white-space: pre;
  transform-origin: 50% 100%;
  animation: wf-bounce 900ms ease-in-out infinite both;
  animation-delay: calc(var(--i) * 70ms);
}
@keyframes wf-bounce {
  0%, 100% { transform: translate(0em, 0em) scale(1, 1); }
  40% { transform: translate(0em, -0.5em) scale(1, 1); }
  70% { transform: translate(0em, 0em) scale(1.1, 0.85); }
}
@media (prefers-reduced-motion: reduce) {
  .wf-bounce .wf-u { animation: none; }
}

Pulse. The whole line swells by 8 per cent and relaxes, slowly. Steady and even, for a button or a sale sign that should be noticed without being annoying.

CSS of Pulse

.wf-pulse {
  display: inline-block;
  animation: wf-pulse 1400ms ease-in-out infinite both;
}
@keyframes wf-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .wf-pulse { animation: none; }
}

Heartbeat. Two quick beats and a rest, over 1.6 seconds. The uneven rhythm is the point: an even swell is Pulse.

CSS of Heartbeat

.wf-heartbeat {
  display: inline-block;
  animation: wf-heartbeat 1600ms ease-in-out infinite both;
}
@keyframes wf-heartbeat {
  0%, 28%, 70%, 100% { transform: scale(1); }
  14%, 42% { transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .wf-heartbeat { animation: none; }
}

Jelly. Letters stay on the line and wobble, wider then taller, in a wobble that dies away. Only fat letters carry it; a thin face just looks faulty.

CSS of Jelly

.wf-jelly .wf-u {
  display: inline-block;
  white-space: pre;
  transform-origin: 50% 100%;
  animation: wf-jelly 1100ms ease-in-out infinite both;
  animation-delay: calc(var(--i) * 40ms);
}
@keyframes wf-jelly {
  0%, 100% { transform: scale(1, 1); }
  30% { transform: scale(1.2, 0.8); }
  40% { transform: scale(0.8, 1.2); }
  50% { transform: scale(1.12, 0.88); }
  65% { transform: scale(0.96, 1.04); }
  75% { transform: scale(1.04, 0.96); }
}
@media (prefers-reduced-motion: reduce) {
  .wf-jelly .wf-u { animation: none; }
}

Float. The line drifts up and down by a few hundredths of its height and tilts one degree each way, over six seconds there and back. The gentlest loop here.

CSS of Float

.wf-float {
  display: inline-block;
  animation: wf-float 3000ms ease-in-out infinite alternate both;
}
@keyframes wf-float {
  0% { transform: translate(0em, 0.08em) rotate(-1deg); }
  100% { transform: translate(0em, -0.08em) rotate(1deg); }
}
@media (prefers-reduced-motion: reduce) {
  .wf-float { animation: none; }
}

Shake. The line shivers from side to side twice a second. It moves without flashing, but constant shaking is hard on some readers, so keep it for a short clip and not for a page people must read.

CSS of Shake

.wf-shake {
  display: inline-block;
  animation: wf-shake 500ms linear infinite both;
}
@keyframes wf-shake {
  0%, 100% { transform: translate(0em, 0em) rotate(0deg); }
  20% { transform: translate(-0.06em, 0em) rotate(-1deg); }
  40% { transform: translate(0.05em, 0em) rotate(1deg); }
  60% { transform: translate(-0.04em, 0em) rotate(-0.5deg); }
  80% { transform: translate(0.03em, 0em) rotate(0.5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .wf-shake { animation: none; }
}

Spin. Each letter turns a full circle, waits, and turns again, one after another along the word. Letters that look alike upside down, such as o, x and s, hide half the effect.

CSS of Spin

.wf-spin .wf-u {
  display: inline-block;
  white-space: pre;
  animation: wf-spin 1800ms ease-in-out infinite both;
  animation-delay: calc(var(--i) * 100ms);
}
@keyframes wf-spin {
  0% { transform: rotate(0deg); }
  55%, 100% { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .wf-spin .wf-u { animation: none; }
}

Light and colour

Neon flicker. A glowing sign that dips three times in each three-second loop: once alone, then twice close together. It never dims more than twice in any one second, which keeps it under the three-flash limit in the WCAG guidelines.

CSS of Neon flicker

.wf-neon-flicker {
  display: inline-block;
  animation: wf-neon-flicker 3000ms step-end infinite both;
}
@keyframes wf-neon-flicker {
  0%, 11%, 54%, 60%, 100% { opacity: 1; text-shadow: 0 0 0.2em currentColor, 0 0 0.8em currentColor; }
  9%, 57% { opacity: 0.4; text-shadow: 0 0 0.104em currentColor, 0 0 0.32em currentColor; }
  52% { opacity: 0.5; text-shadow: 0 0 0.116em currentColor, 0 0 0.38em currentColor; }
}
@media (prefers-reduced-motion: reduce) {
  .wf-neon-flicker { animation: none; }
}

Glow pulse. The halo round the letters breathes in and out every two seconds while the letters themselves stay still and fully lit. It needs a dark background to show.

CSS of Glow pulse

.wf-glow-pulse {
  display: inline-block;
  animation: wf-glow-pulse 2000ms ease-in-out infinite both;
}
@keyframes wf-glow-pulse {
  0%, 100% { text-shadow: 0 0 0.116em currentColor, 0 0 0.38em currentColor; }
  50% { text-shadow: 0 0 0.2em currentColor, 0 0 0.8em currentColor; }
}
@media (prefers-reduced-motion: reduce) {
  .wf-glow-pulse { animation: none; }
}

Colour cycle. The whole line turns once round the colour wheel every four seconds. It shifts whatever colour you start from, so black, white and grey text will not change at all.

CSS of Colour cycle

.wf-colour-cycle {
  display: inline-block;
  animation: wf-colour-cycle 4000ms linear infinite both;
}
@keyframes wf-colour-cycle {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .wf-colour-cycle { animation: none; }
}

Rainbow wave. The same trip round the colour wheel, but each letter starts 120 milliseconds after the one before, so bands of colour travel along the word. Start from a strong colour such as red.

CSS of Rainbow wave

.wf-rainbow-wave .wf-u {
  display: inline-block;
  white-space: pre;
  animation: wf-rainbow-wave 3000ms linear infinite both;
  animation-delay: calc(var(--i) * 120ms);
}
@keyframes wf-rainbow-wave {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .wf-rainbow-wave .wf-u { animation: none; }
}

Flame colours. Each letter runs from yellow through orange to red and back every 0.9 seconds while it twitches a twenty-fifth of its height, out of step with its neighbours. Yellow is far brighter than red, so each letter dims about once a second, which is under the three-flash limit.

CSS of Flame colours

.wf-flame-colours .wf-u {
  display: inline-block;
  white-space: pre;
  animation: wf-flame-colours 900ms ease-in-out infinite both;
  animation-delay: calc(var(--i) * 70ms);
}
@keyframes wf-flame-colours {
  0%, 100% { transform: translate(0em, 0em); color: #ffd23f; text-shadow: 0 0 0.14em currentColor, 0 0 0.5em currentColor; }
  35% { transform: translate(0em, -0.04em); color: #ff8a00; text-shadow: 0 0 0.176em currentColor, 0 0 0.68em currentColor; }
  65% { transform: translate(0em, 0.02em); color: #e62e00; text-shadow: 0 0 0.152em currentColor, 0 0 0.56em currentColor; }
}
@media (prefers-reduced-motion: reduce) {
  .wf-flame-colours .wf-u { animation: none; }
}

Shine sweep. A narrow band of white light crosses the line from left to right, then rests for a second. In CSS it is a moving gradient clipped to the letters, so the text colour has to be set through the gradient.

CSS of Shine sweep

.wf-shine-sweep {
  display: inline-block;
  --wf-ink: #c9a227;
  background: linear-gradient(110deg, var(--wf-ink) 42%, #fff 50%, var(--wf-ink) 58%) 100% 0 / 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: wf-shine-sweep 2500ms ease-in-out infinite both;
}
@keyframes wf-shine-sweep {
  0% { background-position: 100% 0; }
  60%, 100% { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wf-shine-sweep { animation: none; }
}

Glitches

Glitch jitter. The line sits still, then jumps sideways for a few frames while red and cyan copies of the letters split apart. Two short bursts in every two seconds, with hard cuts and no easing.

CSS of Glitch jitter

.wf-glitch-jitter {
  display: inline-block;
  animation: wf-glitch-jitter 2000ms step-end infinite both;
}
@keyframes wf-glitch-jitter {
  0%, 14%, 65%, 100% { transform: translate(0em, 0em); text-shadow: 0em 0 0 #ff2a6d, 0em 0 0 #05d9e8; }
  10% { transform: translate(-0.04em, 0em); text-shadow: 0.05em 0 0 #ff2a6d, -0.05em 0 0 #05d9e8; }
  12% { transform: translate(0.05em, 0em); text-shadow: -0.04em 0 0 #ff2a6d, 0.04em 0 0 #05d9e8; }
  62% { transform: translate(0.03em, 0em); text-shadow: 0.06em 0 0 #ff2a6d, -0.06em 0 0 #05d9e8; }
}
@media (prefers-reduced-motion: reduce) {
  .wf-glitch-jitter { animation: none; }
}

VHS drift. Most of the loop is still. Once every 2.6 seconds the line leans hard to one side and snaps back, like a tape losing tracking for a moment.

CSS of VHS drift

.wf-vhs-drift {
  display: inline-block;
  animation: wf-vhs-drift 2600ms ease-in-out infinite both;
}
@keyframes wf-vhs-drift {
  0%, 45%, 55%, 100% { transform: translate(0em, 0em) skewX(0deg); }
  48% { transform: translate(0.08em, 0em) skewX(-12deg); }
  52% { transform: translate(-0.04em, 0em) skewX(6deg); }
}
@media (prefers-reduced-motion: reduce) {
  .wf-vhs-drift { animation: none; }
}

Own work. Every preset was written for this site as plain numbers: what moves (a letter, a word or the whole line), how long one cycle lasts, the delay between neighbours, the easing, and a short list of stops giving position in em, rotation in degrees, scale, opacity, blur, hue, glow or colour. A scratch script turned those numbers into the CSS stored with each preset and checked it in a headless browser, so the list, the canvas and the pasted CSS describe the same motion. There are 26 presets: 10 reveals that play once, 8 loops that move, 6 that change light or colour and 2 glitches. Names and timings are this site's own and are not taken from any other tool or library. The script also counted how often each looping preset dims and brightens and refused any that did so more than three times in one second, the limit in WCAG success criterion 2.3.1 (https://www.w3.org/WAI/WCAG22/Understanding/three-flashes-or-below-threshold.html); the busiest, Neon flicker and Flame colours, reach two. Every preset's CSS ends with a prefers-reduced-motion rule (https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion). The font suggested for each preset is one of the 124 fonts bundled with the lettering tool, all under the SIL Open Font License 1.1 as recorded in the tool's own font list. Checked on 2026-09-19.

Fonts on this page

Show the list

Every font in this tool is free to use, also for things you sell. The files are served from this site under their open licence.

Fredoka by Milena Brandão, Hafontia. Copyright 2016 The Fredoka Project Authors (https://github.com/hafontia/Fredoka-One). SIL Open Font License 1.1 (variable axes pinned (wght 600), reduced to the Latin characters, saved as WOFF2)
Courier Prime by Alan Dague-Greene. Copyright 2015 The Courier Prime Project Authors (https://github.com/quoteunquoteapps/CourierPrime). SIL Open Font License 1.1 (reduced to the Latin characters, saved as WOFF2)
Playfair Display by Claus Eggers Sørensen. Copyright 2017 The Playfair Display Project Authors (https://github.com/clauseggers/Playfair-Display), with Reserved Font Name "Playfair Display". SIL Open Font License 1.1
Poppins by Indian Type Foundry, Jonny Pinhorn, Ninad Kale. Copyright 2020 The Poppins Project Authors (https://github.com/itfoundry/Poppins). SIL Open Font License 1.1 (reduced to the Latin characters, saved as WOFF2)
Bagel Fat One by Kyungwon Kim, JAMO. Copyright 2022 The Bagel Fat Project Authors (https://github.com/JAMO-TYPEFACE/BagelFat). SIL Open Font License 1.1 (reduced to the Latin characters, saved as WOFF2)
Bangers by Vernon Adams. Copyright 2010 The Bangers Project Authors (https://github.com/googlefonts/bangers). SIL Open Font License 1.1 (reduced to the Latin characters, saved as WOFF2)
Cinzel by Natanael Gama. Copyright 2020 The Cinzel Project Authors (https://github.com/NDISCOVER/Cinzel). SIL Open Font License 1.1 (variable axes pinned (wght 700), reduced to the Latin characters, saved as WOFF2)
Anton by Vernon Adams. Copyright 2020 The Anton Project Authors (https://github.com/googlefonts/AntonFont.git). SIL Open Font License 1.1 (reduced to the Latin characters, saved as WOFF2)
Lobster by Impallari Type. Copyright 2010 The Lobster Project Authors (https://github.com/impallari/The-Lobster-Font), with Reserved Font Name "Lobster". SIL Open Font License 1.1
Russo One by Jovanny Lemonad. Copyright (c) 2011-2012, Jovanny Lemonad (jovanny.ru), with Reserved Font Name "Russo". SIL Open Font License 1.1
DynaPuff by Toshi Omagari, Jennifer Daniel. Copyright 2021 The DynaPuff Project Authors (https://github.com/googlefonts/dynapuff). SIL Open Font License 1.1 (variable axes pinned (wght 700), reduced to the Latin characters, saved as WOFF2)
Pacifico by Vernon Adams, Jacques Le Bailly, Botjo Nikoltchev, Ani Petrova. Copyright 2018 The Pacifico Project Authors (https://github.com/googlefonts/Pacifico). SIL Open Font License 1.1 (reduced to the Latin characters, saved as WOFF2)
Caveat by Impallari Type. Copyright 2014 The Caveat Project Authors (https://github.com/googlefonts/caveat). SIL Open Font License 1.1 (variable axes pinned (wght 700), reduced to the Latin characters, saved as WOFF2)
Creepster by Sideshow. Copyright (c) 2011, Font Diner, Inc (diner@fontdiner.com),. SIL Open Font License 1.1
Bungee by David Jonathan Ross. Copyright 2023 The Bungee Project Authors (https://github.com/djrrb/Bungee). SIL Open Font License 1.1 (reduced to the Latin characters, saved as WOFF2)
Monoton by Vernon Adams. Copyright (c) 2011 by vernon adams (vern@newtypography.co.uk),. SIL Open Font License 1.1
Audiowide by Astigmatic. Copyright (c) 2012, Brian J. Bonislawsky DBA Astigmatic (AOETI) (astigma@astigmatic.com), with Reserved Font Names "Audiowide". SIL Open Font License 1.1
Orbitron by Matt McInerney. Copyright 2018 The Orbitron Project Authors (https://github.com/theleagueof/orbitron), with Reserved Font Name: "Orbitron". SIL Open Font License 1.1
Rubik Glitch by NaN, Luke Prowse. Copyright 2020 The Rubik Filtered Project Authors (https://github.com/NaN-xyz/Rubik-Filtered). SIL Open Font License 1.1 (reduced to the Latin characters, saved as WOFF2)
VT323 by Peter Hull. Copyright 2011, The VT323 Project Authors (peter.hull@oikoi.com). SIL Open Font License 1.1 (reduced to the Latin characters, saved as WOFF2)