Strange (Wrong?) font selection in agency.css?

Question

I am working on a theme for a new website. We had some professional graphics help us design the theme. For the front page, they took and tweaked the Agency theme.

If you download that theme (it is free) and search for the agency.css file and open it, there is one CSS line to indicate the default font of the page:

body
{
    font-family: "Roboto Slab", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

As we can see, the specified fonts in font-family start with "Roboto Slab", then it goes on with "Helvetica Neue", "Helvetica", "Arial", and finally, the default "sans-serif" that the browser would be happy about.

Only the "Roboto Slab" font is a "serif" font, all the others are "sans-serif" fonts...

As a designer, would you say that this is a mistake? Because if your computer does not include the font or if the font is somehow not available at the link above, it would go from a "serif" font to a "sans-serif" font... That seems wrong to me.

Answer 1

There are two different aspects you should consider:

1. Providing different font families for the same text is no longer needed in modern web.

This is a legacy technique back from when fonts were required to be installed on a machine in order to be used for rendering a web page. Since we now are able to provide fonts as css files and load them using @font-face declarations, (which I assume your website uses), the fallback only occurs when the machine rendering the website fails at loading the provided font file (this is extremely rare and, when it happens, it is likely that fonts rendering with a different face is not the most serious rendering problem of the page - so the best course of action would probably be to just reload the page).

2. If the second and the third font options were provided by the designer (provided they are professionals) the fonts were probably matched with your other main font and, even though it's part of a different type, it will still complement the other font well.

---

I'd like to point out I actually have design related studies but have turned into a professional coder over the past ~10 years.
Choosing and matching fonts is a complex process and more often than not, the right size, weight or style weigh in more than whether the font is serif, sans-serif, monotype or fantasy. There's no recipe for matching fonts and usually it involves taking a step back and looking through dimmed eyes. It's also important one also tests with multiple types and combinations of content, to make sure they all are balanced and look well.

In design, following strict rules gets you above average results, but never in the top 10%. Those are most times based on bold actions and inspiration. Don't measure the designer's work using a ruler. If you really need to, measure it in terms of user behavior. If there's an increase in traffic/response/commitment, you got a good design.

Answer 2

The answer you will get from a question like this will to some degree be based on opinions, rather than facts, references, or specific expertise. My opinion is that all important browsers support web fonts. If the web font is used correctly it will show correctly to 99.9% of the site visitors. The other fonts listed is just fallbacks for the 0.1% visitors that for some reason is not able to load the custom web font. The most important thing is that they will be able to read your content. If you would like to control the fallback font, you should choose a set of system native fonts present on all platforms. You could use courier, but that is a mono spaced font (fixed-width) and I doubt it is more readable or fancy. A sans serif is also more modern than e.g. Times and therefore closer to the modern look of Roboto Slab.