Is it common for a website to have more than one font?

Design & UX
1

When I built my current personal website with Drupal and Olivero theme I did this:

* {
    font-family: arial !important; /* Force change of any Drupal Olivero theme font */
}

This may read primitive to you but I am no graphic designer and don’t know much about graphic design and even website design.

According to most website designers, was I “right” in this approach?
Is there a more accepted approach?

Here I gave the same font for the header, middle and footer, for the homepage and for all other webpages.
But maybe I should give a different font to the header and footer? or to the header, footer and homepage?

Maybe I should give different font for popups?

Something like:

header {
    font-family: tahoma !important;
}

article {
    font-family: arial !important;

.homepage article {
    font-family: alef !important
}

footer {
    font-family: tahoma !important;
}

.popup {
    font-family: alef !important;
}

Please do criticize my first approach, please suggest your approach, please suggest improvements, etc.

By the way, my website is in Hebrew, which has about 99.99% less standard-web-browser-fonts than English, so I am quite limited to the three above (Arial, Tahoma, Alef and maybe two-three more).

1 Like
2

I would say it is common to have more than one font. But that doesn’t mean you must have more than one.
Certainly I would limit how many fonts were used and be consistent in where the various fonts are used.
For example you may have a particular font for body text, something nice and readable, but have something different or more fancy for headings.
You may want to use a different style for things like blockquotes, or on a site like this that deals with code, it’s common to use a monospace font for that.
But again, do keep it to a minimum, don’t go over the top with multiple fonts, it can just look bad and messy.
Just one font with many variations can go a long way, with different weights, italics, etc.

1 Like
3

I thnk I should generally never use more than five fonts at once, or five variants of a font, at once.

4

You can import fonts you want to use via @font-face.

Regardless if you try importing fonts or just using typically available fonts, you should also be including a generic font family name as a final fallback, in case none of the options you selected are available.

As far as design goes, I think a single font is acceptable, though having a separate font for headers/titles may be worth while. I’d keep the number low though, 1-3 general fonts, maybe others for specific use-cases if needed.

5

Oh yeah I hate @font-face.
I also think 1-3 fonts is a good direction.

1 Like
6

I think five different fonts may be too many.
But for variations on the same font I may be a bit more liberal, depending on how and where they are used. You are not going to see so much divergance in style with font variants.

7

I think its generally what font you’re using what you’re using them for, more than a rule that says “there must be X fonts or fewer”.

Your example, for example, has a font for the header/footer, and a font for the article. Which i think is fine; it’s a clear deliniation point - the header is this font, its for standing out and bannering the site; the article font is for the main display of information. Simple, clean, section level changes.

To go to the other end of the spectrum, if you have one font for the first paragraph, a different font for the second paragraph, a different font for the third paragraph… you’re losing the user’s attention span by forcing them to change their font-reading every time you start a new thought. It’s too busy.

Think about a newspaper - it’s got that banner header, in its own font; that’s its brand. Then generally you’ve got a font (or a weight/size of the main font) for the top headline; but all of the artciles are using the same font, even if its different from the header and headlines; the information is conveyed equally, allowing the user’s eyes to settle in and read long blocks.

1 Like
8

Agreed that example makes for unpleasant reading.

I worked as an artworker on a kid’s football magazine back in the 90s. Lots of fonts and colours were used in that publication, because kids generally have a short attention span — or atleast that was the reason given to me.

In your case bendqh1 I would say less is probably more.

2 Likes
9

In my opinion, variants of one font will be nice, it will appear as though there’s some form of consistency

11

yes its usual that u have different fonts in a single website to represent your Website.