How to Use Fonts on Your Website

When building a website, choosing fonts can be a total time suck. You cycle through all the various permutations of typeface for each element of your website, and get stuck on the question of bold vs. italic, from Amatic to Zapfino.
Today I’m demystifying fonts and showing you how to use them the right way on your website.

Graphic design

In these times of accessible web publishing, it seems that anyone can be a graphic designer. But of course, this isn’t the case. It still holds true that the best person to design your website is a professional graphic designer. After all, they are the ones with the training, experience, skill, and talent to make your brand come to life.
There’s no substitute for investing in a good design right off the bat. Graphic design encompasses various aspects of a website. Colors, spacing, typography, layout, logo and visual balance are all elements that a designer will consider.
But with that said, there’s no reason why everyone can’t learn a few basics of design, so you’re able to make minor adjustments and tweaks without needing to call in a professional. After all, designers are busy and often expensive, so you might not need to seek their help for every change. And every designer had to start somewhere.
Let’s have a look at fonts, and how they can be used on your website.



What are fonts?

When we talk about fonts, we are referring to the style of the type used. There are thousands (maybe even millions) of different fonts in the world. These range from the hugely popular and widely-used (like Helvetica or {{shudder}} Comic Sans), to the obscure and the proprietary.

Typeface vs. font

You may have heard the terms ‘typeface’ and ‘font’. 

Typeface is the name for the broader style of type, like Helvetica or Garamond.
Font refers to a particular size and weight of that typeface, for example “Helvetica Light 12px.”

The difference between the meaning of these two terms is subtle, and not relevant to most people working with web publishing. These days, both terms can be used interchangeably. In this article, I use font to refer to both typefaces and fonts.

Serif and sans-serif fonts

The terms ‘serif’ and ‘sans-serif’ are used to differentiate between groups of fonts. Serif fonts have little end-caps on their lines, whereas sans-serif fonts don’t have these end-caps.
For example, Garamond is a serif font (serifs are highlighted red here):

Helvetica, on the other hand, is a sans-serif font:

Many designs use a combination of serif and sans-serif fonts to contrast headers and body text.

Display/decorative fonts

These are fancy fonts that you might use sparingly for special purposes, like fonts, headings, or stylistic elements. You wouldn’t use these for body text as they can render the text quite hard to read.
Impact Label is an example of a display font:


How to use fonts on your website

It used to be the case that fonts were not inherently part of the website, but rather a website would tell the visitor’s computer which font to display from its library. This required the use of “web-safe fonts,” meaning fonts that were on every computer and therefore if you used them on your website, everyone would see the same font.
This is a bit of an old concept now, as there are services you can use to display a multitude of fonts on your website. These services draw from an online library of fonts to display them on your website, meaning that as long as your site’s code points to the online library, everyone visiting the site will see the same font, regardless of whether they have them on their computer. Some examples of these services are Google Fonts (my personal favorite), Font Squirrel, and Adobe TypeKit.
[For commercial fonts, The Mogul Mom loves My Fonts.]
The method for implementing the web font on your website varies depending on its particular setup. Essentially, the website needs to reference the font files, and also your stylesheet needs to apply the relevant fonts to the body and headings.
If you’re using WordPress, you can try the Easy Google Fonts plugin. This should allow you to change the font, however keep in mind that it might not work with all themes.

If you have any questions, I’m happy to help out in the comments




Tessa Needham Synnott

Owner at WP Supergeek
Tessa Needham Synnott is passionate about designing for and teaching WordPress. She also has a background in performance, video, design, photography, and writing. She is Australian but currently lives in Berkeley, California, with her husband, two sons, and cat.

Latest posts by Tessa Needham Synnott (see all)



Submit a Comment

Your email address will not be published. Required fields are marked *

Pin It on Pinterest