10 Fun Fonts To Try For Your Blog Logo

by Amanda Aitken · 43 comments

Site feeling a little sad? Blog feeling a little blah? Today I’m going to walk you through an easy fix that will instantly perk up the look of your web presence: change your logo font!

This one simple change can make a HUGE difference to the look of your site – but often, it either doesn’t occur to us to try it, or we just don’t know where to begin when it comes to finding the perfect font (you might spend hours hunting, only to fall into what I call “the font vortex”).

Plus, if you’re not a “real designer”, it’s easy to doubt yourself and assume that you don’t know the first thing about this stuff. That’s where this article comes in. :)

We’ll begin by taking the guesswork out of the process by introducing you to 10 fun, free, can’t-miss fonts you’ve likely never seen before. All you have to do is pick the one you like best, and then follow my instructions to put it into place on your blog or site. It’ll be inspiring, it’ll be fast, and it’ll totally change the way you think about your little slice of the World Wide Web.

So without further ado, let’s meet the fonts!

Fun Font #1: Sail

This happy, preppy font is on the feminine side without being frilly. Try it on your fashion or photography site to modernize your design in a jiffy.

Fun Font #2: Love Ya Like A Sister

This font would be stellar on a kid-oriented blog, or an educational site that doesn’t take itself too seriously.

Fun Font #3: Londrina Outline

The hand-drawn design trend shows no sign of slowing down these days, and if that’s the route you’re going with your Thesis site, you need a light, quirky font. This one is just unusual enough to be eye-catching, but it’s still nice and legible.

Fun Font #4: Francois One

Like a clean look, but sick of those old standbys, Helvetica, Arial, and Verdana? This font is a great alternative. Think of it as the strong, silent type of this list.

Fun Font #5: Amatic

This all-caps font is light on pretension and high on character. Lighthearted and unassuming, I could see this working well on a cooking or travel site.

Fun Font #6: Graduate

Love football – or at least the keg parties that go along with it? This masculine font will have your visitors thinking back to their college days.

Fun Font #7: IM Fell DW Pica SC

This one doesn’t have the catchiest name, but it’s definitely got a unique look: kinda like an old wax seal. This would be just the thing for a history-themed site.

Fun Font #8: Emilys Candy

When it’s gotta be girly, this font never disappoints. You’ll femme up your site in a heartbeat with these little hearts and curlicues.

Fun Font #9: League Script

This elegant script font has a swingy, European feel. Try it on a site that needs a breath of fresh air.

Fun Font #10: Fanwood Text

For the traditionalists: if you like the look of “serif” fonts (those are the ones with the little “feet” on the letters), this one’s an awesome option for a subtle site update.

How to use one of these fonts in your Thesis site logo

First of all, I should specify that if you have a header image uploaded in Thesis, you’ll need to edit the image itself (and the text contained within it) using an image editing program such as Photoshop (you can download all the Google Web Fonts for free, which is a nice perk).

But if you’re not currently rocking a header image on your site (i.e. if your site name/logo is plain old text at the moment), just follow these steps to switch it over to the Google Web Font you like best:

1. First, go to the Google Web Fonts site, type the name of the font you like in the Search box at the top left of the page, and hit “enter”.

2. Then click the blue “Quick-use” link that you see on the right side of your screen, under the name of the font you want to use for your site logo.

3. On the next page, scroll down a bit to the “Add this code to your website” box. Copy the code you see in there.

4. In a separate browser tab or window, log in to your WordPress admin for your site and go to Thesis –> Site Options. In the “Additional Scripts” box, paste in the code you just copied from the Google Fonts website (just paste it immediately after any code that’s already in there).

5. Click the Big Ass Save Button.

6. Go to your custom.css file under Thesis –> Custom File Editor. Scroll down to the bottom of the file, and paste in the following code:

.custom #header #logo { }

Don’t save the page yet.

7. Return to the Google Web Fonts page you still have open, and look for the area called “Integrate the fonts into your CSS”. Copy the code you see there. It should look something like this:

font-family: 'Amatic SC', cursive;

8. Go back to your custom.css file in your other browser tab or window, and paste the code you just copied between the curly brackets that you placed there in the previous step. Don’t forget to include the closing semicolon when you copy and paste. This should give you an end result that looks like this:

.custom #header #logo { font-family: 'Amatic SC', cursive; }

9. Click the Big Ass Save Button.

10. Check out your site! Your new logo font should now be in place!

Just one warning: The right logo font will totally set the tone for your blog or site, so don’t be surprised if changing yours inspires you to do a total redesign! Luckily, because you’re running Thesis, doing that is a cinch. :)

Have fun out there – and beware the font vortex!

About the Author: Amanda Aitken is the creator of The Girl's Guide to Web Design, the online course that teaches women (and men who are cool with hanging with a bunch of ladies!) how to design and code unique and stunning Thesis-based blogs and sites. And heads up: she needs your help TODAY to help her clinch the title of "Thriving Female Entrepreneur of 2012", which will allow her to continue spreading the word about Thesis all over this fine planet of ours. If you love Thesis, please click here to vote for Amanda and The Girl's Guide to Web Design now! She's currently in third place and today is the last day to vote!

If you enjoyed this article, enter your email below to get free updates!

{ 43 comments }

Larry

Thanks for sharing the great fonts, I used IM Fell for my blog logo and really love the look.

Lodrina Outline would look really great filled in with some color.

Larry

Hey, what happened to my link? I see other people’s names link to their sites. Feel free to email me.

Pat

The fonts are awesome! Thanks for a wonderful article on something I’d never have thought to do.

I love sail becasue it looks pretty and is still easy to read.

David Radovanovic

Please. Hire a logo designer. Don’t think for a moment of using a funny-looking font/typeface. It will NOT achieve the same results of a unique symbol created exclusively for your identity/brand. Sorry to be a Debbie Downer… wah, wah.

Jacob

Dude, your logo, or “unique symbol, ” as you call it, is fifteen letters and a question mark. 94% of your own logo is the font your designer chose. The other 6% is clip art.

Not to be a jerk, but WhatsTheBigIdea(tm)?

David Radovanovic

Jacob, name-calling does not contribute to the conversation.

Jacob

David, no name-calling here, broski.

What I said was, “not to be a jerk,” which meant, “I’m not trying to be a jerk when I say this…”

I did call you “Dude,” which I assure you is a term of endearment.

Stunted

oh la la!

Richard

Do I detect a bit of sarcasm here?

Anyways good Post and its just the right thing for the next video tut. Yes, I am turning these tuts into a screencast, with full attribution of course.

JudyAnn Lorenz

A professional logo is cool; I think we’re mixing terms here. When we set up the basic WordPress with Thesis, the words/letters/title/name of the site that is in text on the website is also referred to as a “logo”. If someone wants to use that text with a blended background header and no graphics, the characters are very clear (some programs make murky characters) and the task has been easy-peasy. More and more bloggers are going for the clean look (not me yet) brand themselves with content before graphics. I play with different graphics all the time and don’t use a formal logo. I suppose that might contribute to my obscurity, but I’ll just have to suffer.

faisal

Awesome but shouldn’t a logo be more than fonts?

sam

Yes..yes they should. But a fun font if used properly can add to the logo for sure.

Jacob

Nice write up, Amanda. Though the font is getting a bit overused, I’m still a huge fan of Lobster.

Also, feel free to email Larry above. Not regarding the content of this post, but about his concern that he won’t be able to siphon as much traffic to his site as other thesis users.

Larry

Feel free to remove Jacob’s link ;-)

Jacob

I would graciously accept that rebuke. For posterity, I’ve removed the link from this comment myself.

Gouri

Let me try to unlink mine too.. OMG, it’s getting automatically linked :D

Jennifer Heller

I used to love Lobster but now…agree…it’s so overused. And yet so sexy!

Rob @ Atlanta Real Estate

I need more imagery and a less mundane design in general..

Amanda

I always forget how using the word “logo” in this sense tends to tick off graphic designers. :P

Let’s just say that it’s being used loosely here. If you’ve got a newish blog or site, this is a great way to spice up your design a little while you’re saving up for a designer to create a bespoke logo for you, if that’s the route you want to go. :)

Geoffrey Gordon

Hey Amanda

Great lists of fonts, I love using Google font’s and familiar using them in thesis. I also think you have a great looking website… But i have some feedback if I may be so bold. The light blue headers are barely led-gable, i would make them a little darker. :)

KChristoph

Font #9: League Script, the only one I like.
Thanks.

Keith Jones

Thank you, nice tutorial.

I’ve tried Francois One.

muazfaris

Hi Amanda,

Nice tips to change the font..

btw, good luck for ur The Girl’s Guide to Web Design . hope you win !!

Carlos

Can I use one of those fonts even if my WordPress theme is not Thesis?

Chinh

Awesome! Thanks for choosing some fonts with diverse “feels” to share. There are just so many out there it’s hard to know where to begin!

Ryan James

This is super-useful info. I had long been frustrated by how to add new fonts to Thesis.

Since we are on the subject, is there any way to show the way a font displays in the “Body and Content Area”? There are a number of fonts there that I am not familiar with, however selecting them and refreshing my site is not a good use of time.

Thanks again.

Sergio Felix

I like Francois One.

It’s boldy, it’s very easy to read, it’s not formal and yet not too kiddie-looking or boring.

I think it’s actually perfect for an informal training course with slides, thanks for the samples Amanda!

Sergio

Jennifer Heller

I used Amatic on my personal site for a long time. Word of warning: the bold does not include common characters such as the exclamation point and instead renders them as @. It’s also really hard to read in small font sizes, though I love it in large.

Bill

Hi Amanda,
I would use #2 or #8 for a fun blog. The rest did not speak to me so much, or were otherwise hard to read.
Thanks so much for the tips about Google Fonts! I did not know there was such a thing!
For my own logo, I used straight up Arial, because it works with the image where it counts most, namely the “Jumping T”. For the site wide text I chose Times New Roman, for its readability. (It is supposed to be a “serious” site with fun & lively overtones.)
The logo I did myself with a vector graphics program called Inkscape. It works great but the X11 interface is a little unusual for us Mac OSX users. It did take me a very long time to get the design to where I wanted it, lots of time considering incremental changes. Worth doing though!

Take a look, my name link goes to the blog page, which is mostly in English. The rest is German. The blog is not Wordpress but Armadillo for Rapidweaver, another Mac-specific program. (am considering Wordpress) The whole site still needs work, sort of like the logo development: One increment at a time!

Thanks again for the enjoyable article,
Bill in Germany

metalpig design

luv those fun fonts! :) thanks!

Bill

PS: I tried to vote for you & your business, in th FB Thrive contest, but it didn’t work… Sorry!

John

Hehe font number 8 is fun and girly
Iwon’t use though but i like it

Laura

The font I like for my blog header is called “Just Skinny”. I don’t know where I found it. It’s my favourite right now.

Hashim Warren

Thank you for introducing me to Francois One. It’s professional but not boring. I’m making the switch!

Liz Aitken

“Since we are on the subject, is there any way to show the way a font displays in the “Body and Content Area”?”

I have the same question as Ryan…

Can someone enlighten us on how we use different fonts like this in the Body and Content area?

JudyAnn Lorenz

Great tips. i appreciate the information. Finding web cooperative fonts isn’t easy. I have lots that I can use in Graphics, but some of them aren’t good for web.

Eddie Gear

Nice list of fonts Amanda. It would be really cool, if thesis can add a way we can import these fonts via the admin section.

Kathy Thomas

wow!
This was SO easy! Thesis rocks!

Used this on a “work in progress” in case I made a mess and found it worked a treat. Thanks for the easy instructions!

I’ll be going through my sites now and revamping them from tired to interesting!

Arafin Shaon

#1 font is damn good@amanda & tnx for the tips pretty easy to implement..

Kevin Velasco

Nice to finally see a typography related post on DIYThemes!

WebMatros

Most of those fonts are incredible ugly. Bad kerning pairs galore.

Jerome

Awesome Amanda, you rock !
Now the question is… how to do it in Thesis 2.0 ? I just upgrade and I’m completely lost :-)
I found out where to paste the tracking scripts but where are now other scripts ?

Jerome from Paris :-)

Harshit Singh

Nice collection, especially the second one looks quite promising!