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.
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
Top comments (3)
Font tester seems like a nice tool. Shared it in my community.
But these fonts are definitely not scary :D
How about these below?
This got a bit too spooky maybe.
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!
Great looking fonts...Thanks my friend