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 ๐Ÿ‘ป

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