Beginner’s Guide to Fonts for Your Blog: Where to Find Free Web Fonts

We creative people need unique and fancy fonts, not the default ones that come standard on our computers, right? So what’s a girl to do if she wants to use a super cool font she’s downloaded but her readers haven’t downloaded it to their own computers? Welcome to Part Two of the Beginner’s Guide to Fonts for Your Blog.

Before we go into where to find fonts, you’ll first want to brush up on how to choose font pairings for your website by reading Part One: How to Choose Font Combinations. Then come back here and we’ll talk about the best places to find great fonts and then how to use them in your site in Part Three.

If you’re using Blogger for your blogging platform, you’ll notice that it automatically offers a pretty decent selection of fonts for your blog which makes it really easy for you to give your blog a unique style. But if you’re bored with their selection or you don’t use Blogger, you’ve probably been searching font websites for something that speaks to you. I’m sure you know of plenty of places to download free fonts, I mean all you have to do is Google “free fonts” right?

Unfortunately there are a few reasons this is a bad idea. For one, many sites that offer free stuff may place spyware in their downloads so you want to make sure that whatever you download, it’s from a reputable website. Another reason you want to be careful about the fonts you download is that many are not technically considered screen readable. They may be fine for print or scrapbook projects, but can be quite difficult to read on a screen.

There are a few things about web fonts that we should know first before we get started looking for fun fonts.

What’s a Web-Safe Font?

Once upon a time you could only use “web-safe” fonts on your sites. These were a small set of 5 fonts that were considered safe to use because virtually everyone had them installed on their machines, whether it was Windows or Mac:

• Arial
• Courier New
• Georgia
• Times New Roman
• Verdana

If you dared to use a non-web-safe font, then you would have taken the risk that your readers might see your favorite font replaced by one of the above web-safe fonts. Your readers probably wouldn’t have known the difference, but they also wouldn’t have seen your site design as you intended it.

Thankfully times have changed. With the emergence of sites like Google Fonts and Font Squirrel, you can now point your site to a font file that’s been uploaded to the web so that everyone can now see that font regardless of whether or not they have it installed on their machines. More on that below. But first one more thing we should know…

A Word About the Use of Text In Place of Images in Your Headings and Keyword Text

You may be wondering why you need to worry about whether a font is installed or not because if you want to use a fancy font, you just create an image. Well….. while that is definitely the better solution for your logo, there are several good reasons why you would not want to use images in place of text headings on your blog or website. Here’s why…

• SEO
  The first reason is SEO (search engine optimization). Search engines can read text, but they can’t read images. Sure, you can add alt (alternate) text to your images using HTML, but alt text won’t carry the same weight in importance as text in a heading tag (h1, h2, h3, etc.) does. This applies to your site’s tagline or slogan too! Take care that whenever you use keywords in your site, that it is text and not image based.
• Page Speed
  The more images your page has to load, the slower it gets, so if we can limit the amount of images each page has to load, the better.
• Ease of Editing
  Every time you add a new heading or want to change one, you have to create a new image. Using text makes it super simple and quick to make edits on the fly.
• Bad for Usability
  You can’t highlight and copy text in images, and you can’t scale the size of text in images. This is not helpful for those reading on smaller screens or those with visual problems.

So try not to use images in place of text when possible, k? Moving on… Now let’s talk about the best places to go to look for FREE fonts you can use anywhere on your website!

Wonderful Free Font Resources

Google Fonts

Your first stop for free fonts should be Google Fonts. The beauty of Google Fonts is that there are hundreds to choose from (629 as of this writing) and using them is as easy as putting a link on your site that points to the font files at google.com.

Google Fonts allows you to search for fonts by category (serif, sans serif, display and handwriting) and then further narrow down your list either by thickness, slant and/or width.

Try these sites out to preview free Google font combinations. You match headings with body text to see how they look together. Vary the weights and sizes for a custom fit.

• Bold. Font Combinations
• Best Web Fonts
• Font Combinator

Font Squirrel

Using the Webfont Kits at Font Squirrel is a little more complicated than using Google Fonts, but they offer some really nice fonts, so if you’re willing to spend some extra time figuring it out, it’s another option for you. Most of the fonts at Font Squirrel are free to use commercially. The caveat with Font Squirrel is that you have to download the font to your computer, then upload it to your server via FTP and then point to those files on your server. If you don’t have access to upload files to your site, you won’t be able to do this.

More Reputable Free Font Resources

The following resources offer free or mostly free fonts that you must download to your machine first. Then you would go to the Font Squirrel Webfont Generator and create your own Webfont Kit. Afterwards, follow the instructions in the downloaded zip file.

Lost Type

Lost Type is a spectacular font foundry that offers some really nice free (or donation based) display fonts. Definitely worth taking a look.

The League of Movable Type

The League offers only the most well-made, free & open-source web-ready fonts. These are of course free to use.

Font Fabric

Font Fabric is a fabulous resource for some amazing free (and paid) fonts. Don’t pass this site by.

Tack-O-Rama

Tack-O-Rama is the place for retro design resources including retro fonts. It has fonts categorized by time period which is very handy and all the fonts are free to use. Just read the terms on each one before using to be absolutely sure.

DaFont

DaFont has over 20k fonts, some good, some bad, and some very bad, haha. But if you find something here you like, download it and create a Webfont Kit.

What the Heck is that Font?

Have you ever seen a font being used on a website or image, that you just can’t identify? Luckily, there are two ways of finding out what that font is!

CSS

If the font is being used on a website and it’s text-based, meaning you can highlight it, go ahead and highlight this word, then right-click and select “Inspect Element.” A window should pop up near the bottom of your screen with a bunch of code. This is how we can view what’s under the hood of any website!

By the way, this works in all the major browsers except IE (Internet Explorer), the bane of all web designers. 😉 To open the element inspector in IE, press F12.

On the left, you’ll see the HTML for the site. You’ll see the text that we highlighted in a ‹p› tag. This is a paragraph tag. On the right you’ll see the style sheet or CSS which is where we define styles for any website element. In this particular case we want to know what the style definitions are for the ‹p› tag. In CSS, it shows up just p. You should see this:

p {
font-size: 1rem;
line-height: 1.625;
}

Now sometimes the p does not have a font-family definition because it is inheriting a definition from a higher level element. In this case, it’s a previous definition with the body tag. The body tag is what encompasses all web pages. So a little further down on the right in the definition for body. You should see this:

body, input, textarea, p {
color: #777777;
font-family: 'OpenSansLight','Lora',Arial,sans-serif;
font-size: 0.875rem;
font-weight: 300;
}

Now we can see what font is being used here: It’s Open Sans Light. The fonts that are listed after it are the fall back fonts listed in something called a CSS Font Stack. We’ll talk more about Font Stacks in Part Three.

If you’re curious as to why the font-size and font-weight definitions are crossed out in the body style definition, it’s because those definitions are being overwritten somewhere else in the style sheets.

WhatTheFont

To discover a font that is being used in an image, I recommend using the WhatTheFont tool at MyFonts.com. You can either upload an image you have downloaded onto your computer somewhere or you can specify the URL of the image. To get the URL of an image on a website, right-click it and select “Copy Image Location.”

WhatTheFont will then process the image and if it’s able to identify it (sometimes it can’t), it will spit out a list of possible fonts.

Once you have the name of the font in hand, you can do a search for it and see what comes up. Hopefully it’s a free font, but it may not be.

Summary

So to quickly recap, it’s best practice to try and use text in place of images wherever possible. This helps our searchability with the search engines, makes it easier to edit and helps our pages load faster. And while there are plenty of places to find free fonts, the best places to find free and safe fonts that are easy to use on our sites are Google Fonts and Font Squirrel.

Did you find these resources helpful? Please take a moment to share it with your friends by clicking one of the social media links below.
Got questions or thoughts? Leave a comment below, I always reply to thoughtful comments or questions.