Web-Safe Fonts and Font Fallbacks
Tags: css, websafefonts
Published: 2019-10-10 15:18:23

---
title: Web-Safe Fonts and Font Fallbacks
published: true
tags: css, web-safe-fonts
canonical_url: https://stephencharlesweiss.com//2019-09-28/web-safe-fonts-and-fallbacks/
---

Today, I had a colleague mention that the font we are using is “web-safe” in response to why it was so weird that it wasn’t showing up correctly on my screen.

I didn’t actually know what “web-safe” meant, so I looked it up. Turns out it’s shorthand and simply refers to the group of fonts that are _likely_ to be installed on the client machine and so will be rendered appropriately.

CoffeCup Software has a nice graphic in their article explaining what web-fonts are:<sup>[1](#footnotes)</sup><a id="fn1"></a>[![Web safe font venn-diagram](https://stephencharlesweiss.com/static/c103501b461093cf292df89bb1cc5a64/b9e4f/web-safe-font-venn_diagram.png)](/static/c103501b461093cf292df89bb1cc5a64/a8200/web-safe-font-venn_diagram.png)

So, how does this relate to fallbacks? Because _if_ a font isn’t available (imagine we like the serf Didot on our site, and our user is on a Windows machine), then we want to control what they see.

In our `index.css` file we have some basic styling set up, including fallbacks for fonts:

```css
body {
  margin: 0;
  font-family: Tahoma, Verdana, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
```

Notice, however, that all of those are san serif fonts and we want this component to _have_ serifs!

Easy enough, we can use a `styled-component`:

```javascript
import styled from 'styled-components';

export const StyledDiv = styled.div`
    font-family: Didot;
`
```

What’s the problem with the above code? If the client _doesn’t_ have `Didot` then there’s no telling which font will be used.

You might think (as I did) that it would fall back to the `font-family` setting we applied in the `index.css` but the styled component is actually _overwriting_ that attribute in this case, so falling-back isn’t possible — there’s simply nothing to fall back to.

Okay, what about `inherit`? Inherit is one of my favorite attributes because it allows you to say that you’d like to inherit the initial value.<sup>[2](#footnotes)</sup><a id="fn2"></a> We can’t _just_ use inherit, however, since we want it to start as `Didot`.

You may be tempted to do the following (as I was):

```javascript
import styled from 'styled-components';

export const StyledDiv = styled.div`
    font-family: Didot, inherit;
`
```

Unfortunately, that’s not valid CSS, and so, while you’ll end up getting the inherited values, it’s because we never even _try_ to apply `Didot` .

So what’s the solution? Create your own fallback thread and focus on web-safe fonts as the base. Here’s what I came up with:

```javascript
import styled from 'styled-components';

export const StyledDial = styled.div`
    font-family: Didot, Georgia, serif;
`
```

## <svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>Footnotes

- <sup>[1](#fn1)</sup> [What is a Web-Safe Font? | CoffeeCup Software](https://www.coffeecup.com/help/articles/what-is-a-web-safe-font/)
- <sup>[2](#fn2)</sup> [inherit - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/inherit)