After choosing your website colors and corporate design, you will also sooner or later need some fonts. There are a couple of things to ask yourself before choosing your font.

What Are Good Fonts For Websites

I claim that modern high usability web fonts typically don’t attach serifs.

Did you know that a typical website visitor decides in a couple of seconds or even less than 1 second if he likes a website or not? So you better arm yourself with all available weapons to make a perfect first impression. Therefore Fonts are definitely an important factor you shouldn’t overlook. And visitors like pages that they can quickly absorb. Get the most important information as quickly as possible. It’s not about the nifty effect you put up there. The slide ins of your pictures. They can only add to but not create great user experience. It’s about the time you save your visitors by providing everything as easy as possible.

Conclusion: good fonts for websites are fonts that are easy to read.

How To Find Good Fonts For Websites

Google has a great database of fonts which includes many great and often used web fonts. You can access them here: https://www.google.com/fonts

Google also attached instructions how to implement their fonts. To save you some time I’ll give you a quick tutorial here too.

  1. Navigate to Google fonts
  2. Browse through the available fonts and select one or more by clicking “Add to Collection
  3. In the tab that opens at the bottom click on “Use
  4. Scroll down to point 3) and select @import in the tabs menu
  5. Copy and paste the code into your style.css

You should now have a line like this in your style.css

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

To use this font called ‘Open Sans’ in all paragraphs on your website also add the following in your style.css

p{
font-family: 'Open Sans', sans-serif;

}

Done! All your paragraphs are now written with the Open Sans font.

How To Find The Best Fonts For Websites

The great thing about Google fonts are their price. Free of charge. However if you want to find the best fonts (subjective) for your website you may need to pay. There are cool fonts sold on font marketplaces like dafont.com, fonts.com, or even 1001freefonts.com. But be aware. Many so called free fonts are only free for personal use. As soon as your website is commercial you need to pay. Always check the licenses attached.

However there are free versions available of really great premium fonts. These free versions are called demos and are often also allowed for commercial use. However they don’t contain many special characters (remember, they are only a demo). So you won’t be able to write a “+“. Instead there will be a symbol saying something like “demo”.

Two really outstanding fonts I love have demo versions available. You can check them out here (scroll down or search for “demo”) :

Muller Font Demo

Campton Font Demo

How To Include Fonts In Your Website

These fonts can’t be included as easy as Google Fonts. The best way is to download your fonts and upload them onto your web server. I uploaded them into my myserver.com/cfonts/ folder.

Then open your style.css (in WordPress “Appearance -> Editor”) and add following lines:

@font-face {
font-family: "Campton Book";
src: url(http://www.myserver.com/cfonts/Campton-Book-d.otf);
}

To write your paragraphs in Campton Book use following css line:

p{
font-family: 'Campton Book', Helvetica;
}

You may have noticed that I always include multiple fonts for my font-family attribute. The reason is to have a fallback font if the main font can’t be loaded. You can also chain fallback fonts like this:

p{
font-family: 'Campton Book', 'Open Sans', Helvetica;
}

Web Save Fonts

Your last font in this chain should always be a web save font. Web save fonts are fonts that most web browsers can handle out of the box. One MIT article suggests that these fonts are the best web save fonts:

  • Arial / Helvetica
  • Times New Roman / Times
  • Courier New / Courier

The One Mistake To Avoid

One more thing: Never mix too many fonts on one website. Websites should be fast to absorb, remember? Use one font for your text and maybe choose another one for your headlines. And then one as an action font for specific items you want to highlight. But that’s it. Never mix too many fonts as this will totally crush your visitors experience.

Summing Up

According to sources Steve Jobs was obsessed with fonts. And you should definitely be too if you want to create outstanding user experiences (at least don’t overlook this topic)!

By the way if you want to know which fonts I used for this website, follow the steps described here and use your web inspector.

Cheers,
Arian