DEV Community

Cover image for It's Spooktober 🎃. Here are top 15 Google fonts to make your website spooky 👻
Paul
Paul

Posted on

It's Spooktober 🎃. Here are top 15 Google fonts to make your website spooky 👻

#frontend #css #halloween #discuss

Halloween is just around the corner, and it's the perfect time to add a touch of spooky fun to your website. You don’t need to go overboard with decorations, something as simple as changing your fonts can make a big impact.

So here are top google fonts that can help you make your website spooky.

I'll be showing the preview of each on Github home page. I made use of Font Tester extension to create the preview and copy the code. So, if you need to know which one suits your website, feel free to use it.

Font Tester Github 🎃

Now without any more delay. Let's dive right in.

Nosifer🩸

First up, Nosifer, a dripping font perfect to show blood dripping or melting.

Nosifer

CSS Code 

@import url('https://fonts.googleapis.com/css2?family=Nosifer');

.nosifer-family{
    font-family: "Nosifer", system-ui;
}
Enter fullscreen mode Exit fullscreen mode

Creepster 👹

Just as it sounds Creepster suits perfectly for all your grisly needs. Perfect paired with monster backgrounds.

Are you serious

CSS Code 

@import url('https://fonts.googleapis.com/css2?family=Creepster');

.creepster-family{
    font-family: "Creepster", system-ui;
}
Enter fullscreen mode Exit fullscreen mode

Butcherman 🧟

This zombified fonts needs to be butchered

Butcherman

CSS Code 

@import url('https://fonts.googleapis.com/css2?family=Butcherman');

.butcherman-family{
    font-family: "Butcherman", system-ui;
}
Enter fullscreen mode Exit fullscreen mode

Eater 🧟‍♀️

Eater is a display font infected by the darkest of rare disease that slowly spreads at night while the webfont user sleeps.

Eater

CSS Code 

@import url('https://fonts.googleapis.com/css2?family=Eater');

.eater-family{
    font-family: "Eater", system-ui;
}
Enter fullscreen mode Exit fullscreen mode

Flavors 🧪

Not even the darkest of magic solution can cure you, once you taste flavors.

Flavors

CSS Code 

@import url('https://fonts.googleapis.com/css2?family=Flavors');

.flavors-family{
     font-family: "Flavors", system-ui;
}
Enter fullscreen mode Exit fullscreen mode

Are you serious ?

Are you serious about changing your website fonts?

are you serious

CSS Code 

@import url('https://fonts.googleapis.com/css2?family=Are+You+Serious');

.are-you-serious-family{
    font-family: "Are You Serious", handwriting;
}
Enter fullscreen mode Exit fullscreen mode

FontDiner swanky 🧛

Reminds me of Dracula

FontDiner Swanky

CSS Code 

@import url('https://fonts.googleapis.com/css2?family=Fontdiner+Swanky');

.fontdiner-swanky-family{
    font-family: "Fontdiner Swanky", system-ui;
}
Enter fullscreen mode Exit fullscreen mode

FriJole 🥶

Sends shiver down the spine.

FirJole

CSS Code 

@import url('https://fonts.googleapis.com/css2?family=Frijole');

.frijole-family{
    font-family: "Frijole", system-ui;
}
Enter fullscreen mode Exit fullscreen mode

Griffy 🧙‍♂️

Are you an old wizard?

Griffy

CSS Code 

@import url('https://fonts.googleapis.com/css2?family=Griffy');

.griffy-family{
    font-family: "Griffy", system-ui;
}
Enter fullscreen mode Exit fullscreen mode

Kablammo 🌵

Whimsical curls meet sharp, edgy spikes in the playful Kablammo font, evoking the magic of a fantastical wizarding world.

Kablammo

CSS Code 

@import url('https://fonts.googleapis.com/css2?family=Kablammo');

.kablammo-family{
    font-family: "Kablammo", system-ui;
}
Enter fullscreen mode Exit fullscreen mode

Matemasie 🦇

Emerging from shadows.

Matemasie

CSS Code 

@import url('https://fonts.googleapis.com/css2?family=Matemasie');

.matemasie-family{
    font-family: "Matemasie", system-ui;
}
Enter fullscreen mode Exit fullscreen mode

Metal mania ⚔️

Metal Mania unleashes a fierce and bold energy, with sharp, metallic edges that feel forged in darkness.

Metal mania

CSS Code 

@import url('https://fonts.googleapis.com/css2?family=Metal+Mania');

.metal-family{
    font-family: "Metal Mania", system-ui;
}
Enter fullscreen mode Exit fullscreen mode

Mystery Quest 🔮

Mystery Quest weaves a tale of shadows and whispers, where every letter curls like mist through a forgotten forest.

Mystery Quest

CSS Code 

@import url('https://fonts.googleapis.com/css2?family=Mystery+Quest');

.mystery-family{
    font-family: "Mystery Quest", system-ui;
}
Enter fullscreen mode Exit fullscreen mode

Rubik beastly 🏹

Rubik Beastly roams with a raw, primal spirit, its jagged forms like claw marks etched in moonlit stone.

Rubik beastly

@import url('https://fonts.googleapis.com/css2?family=Rubik+Beastly');

.rubik-family{
    font-family: "Rubik Beastly", system-ui;
}
Enter fullscreen mode Exit fullscreen mode

Rubik Glitch 🎐

Rubik Glitch dances on the edge of reality, where letters shimmer and fade like echoes of the unseen.

Rubik glitch

@import url('https://fonts.googleapis.com/css2?family=Rubik+Glitch');

.rubik-family{
    font-family: "Rubik Glitch", system-ui;
}
Enter fullscreen mode Exit fullscreen mode

Wrapping up

These were the top 15 fonts, I personally picked for this Spooktober

Didn't find what you were looking for?

Well feel free to use the Font Tester and test over 1000 fonts on your website and pick one that suits you :)

Oh! Don't forget to share your spooky website and favorite spooky font down below. Happy Halloween

Top comments (3)

Collapse
 
anmolbaranwal profile image
Anmol Baranwal •

Font tester seems like a nice tool. Shared it in my community.

But these fonts are definitely not scary :D

How about these below?

Image description

Image description

Image description

Image description

Image description

Image description

This got a bit too spooky maybe.

Collapse
 
paul_freeman profile image
Paul •

Wow! these looks great. However, I am guessing that these fonts are not from google fonts? It also depends on how and where you apply these google fonts. Lol!

Collapse
 
tcarson profile image
tcarson •

Great looking fonts...Thanks my friend