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:1
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:
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
:
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.2 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):
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:
import styled from 'styled-components';
export const StyledDial = styled.div`
font-family: Didot, Georgia, serif;
`
Top comments (0)