Specialty fonts for websites

When we first started making websites, almost 12 years ago, you really only had a few fonts to choose from on your website because if the person viewing your website didn’t have the same fonts loaded on their computer, then whatever fonts you picked wouldn’t be displayed. What that meant was that you had to pick from a handful of common fonts that were standard on all computers, across all types both Mac and Windows. That didn’t leave you many fonts, you had a choice of about 15 fonts.

That was pretty boring.

So the next thing people started doing, to get their fonts, was making websites that were all JPG based. I have seen this on many old websites. If someone wanted a particular font, they’d just design the website, cut it into blogs in Photoshop, and reassemble it in HTML. This was never a great idea. First, it made for a slow website, particularly during that time period (our Internet has gotten much faster since then). But it also made it impossible for you to get ranked in the search engines because your website had no words on it. All the words were hidden in images. (Not to mention the visually disabled who wouldn’t be able to read the website at all!)

Luckily, now we have lots of options for fonts and you don’t have to be sure that every user has the font on their computer to do it. You can use custom fonts on your site and there are a variety of ways to do it.

The two services I use the most for fonts are TypeKit and Google Fonts.

Adobe Typekit

Typekit is a font-hosting service, owned by Adobe, that allows you to use their fonts on your websites. You embed some code into your site and it connects to the Typekit server to render those fonts on whatever machine is viewing the site. It’s pretty nifty.

Some of my favorite Typekit fonts are Proxima Nova, Fairplex, and Marydale.

You do have to have a Typekit account. As an Adobe Creative Suite member, Typekit comes with our membership. If you only need fonts for one website, they have a free level that probably gives you what you need. If you do a lot of websites, you may want a bigger option that can range in cost $50-$100 a year.

Google Fonts

I heart Google fonts. There are 848 font families to choose from and they are super easy to use. These fonts are free to use, open source, and there are so many to choose from, you may get lost trying to find the right one!

Some of my favorites include Work Sans (the font on this website!), Raleway, Roboto, and Montserrat.

A few notes on specialty fonts for your website

• Don’t use too many. Trust me, 2-3 at most. Just because you can use a lot, doesn’t mean you should. Not only will it make your website cheesy and distracting, but the more fonts you need to load, the slower your website will load.
• Make sure you choose something readable. Yes, one may be cutesy and fun, but if your audience can’t read it, then what’s the point?
• Try not to use both Typekit and Google fonts on the same site. If you have to load fonts from two different places, that puts more strain on your site’s load time.
• It’s okay to use the common fonts too! There are great sites using common fonts. The benefits of this are that there’s no load issue when you use the common fonts.

What if you want a font that’s not in Typekit or Google?

You can do that too! It just takes a little extra work to make it happen. First, understand that you have to have a license to use most fonts, so double check the licensure to make sure it’s okay to use. Google is open source and Typekit has a subscription, but you may not be able to upload any old font you want and use it. I’m not a lawyer, but I’d recommend checking before you use any font.

To use your own font, you’ll need to upload the font to your child theme folder and then add some code to your CSS file to allow your website to use the fonts. Then just style the site using your new fonts. There are lots of great tutorials that will walk you through this step by step.

A note on branding

Years ago, a client came to me with one of those sites made of JPGs and when I asked why it was like that, she went on and on about how important their font was for branding. I’m not saying that it’s not important, but is it more important than your site being ranked in search engines? No. If you are just starting your business and are selecting a font, make sure whatever fonts you pick are widely available and able to be used on your website. It’ll save you a lot of time! If not, create a logo in whatever font you want and find a complementary font to use on your website. Sometimes you can even do searches and find fonts that are almost identical to use, so you can keep your branding without resorting to sneaky tricks to display your fonts.

If you need help with font issues, feel free to contact us and we’ll take a look and give you some advice. Long gone are the days of 15 font choices, now the biggest issue is having too many to choose from and not enough time to shop around!