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.

CSS Code

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

.nosifer-family{
    font-family: "Nosifer", system-ui;
}

Creepster 👹

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

CSS Code

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

.creepster-family{
    font-family: "Creepster", system-ui;
}

Butcherman 🧟

This zombified fonts needs to be butchered

CSS Code

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

.butcherman-family{
    font-family: "Butcherman", system-ui;
}

Eater 🧟‍♀️

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

CSS Code

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

.eater-family{
    font-family: "Eater", system-ui;
}

Flavors 🧪

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

CSS Code

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

.flavors-family{
     font-family: "Flavors", system-ui;
}

Are you serious ?

Are you serious about changing your website fonts?

CSS Code

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

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

FontDiner swanky 🧛

Reminds me of Dracula

CSS Code

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

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

FriJole 🥶

Sends shiver down the spine.

CSS Code

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

.frijole-family{
    font-family: "Frijole", system-ui;
}

Griffy 🧙‍♂️

Are you an old wizard?

CSS Code

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

.griffy-family{
    font-family: "Griffy", system-ui;
}

Kablammo 🌵

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

CSS Code

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

.kablammo-family{
    font-family: "Kablammo", system-ui;
}

Matemasie 🦇

Emerging from shadows.

CSS Code

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

.matemasie-family{
    font-family: "Matemasie", system-ui;
}

Metal mania ⚔️

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

CSS Code

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

.metal-family{
    font-family: "Metal Mania", system-ui;
}

Mystery Quest 🔮

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

CSS Code

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

.mystery-family{
    font-family: "Mystery Quest", system-ui;
}

Rubik beastly 🏹

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

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

.rubik-family{
    font-family: "Rubik Beastly", system-ui;
}

Rubik Glitch 🎐

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

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

.rubik-family{
    font-family: "Rubik Glitch", system-ui;
}

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