3 ms·
I use this quite a bit! At the very least, if you're going to insist on using a custom font, having the rest of one of these stacks behind it can help guarantee
by xd1936 1y ago
I use this quite a bit! At the very least, if you're going to insist on using a custom font, having the rest of one of these stacks behind it can help guarantee that users with third-party resource blockers or other weird browsers get an experience closer to what you intend.
For example, I always take Google Font's suggestion for Inter[1]:
font-family: "Inter", sans-serif;
and change it to:
font-family: "Inter", system-ui, sans-serif;
or e.g. EB Garamond[2] from:
font-family: "EB Garamond", serif;
to:
font-family: 'EB Garamond', 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
It makes for less layout shift on slower connections too.
1. https://fonts.google.com/specimen/Inter https://fonts.google.com/specimen/Inter
2. https://fonts.google.com/specimen/EB+Garamond https://fonts.google.com/specimen/EB+Garamond
- strenholme 1y agohttps://screenspan.net/fallback https://screenspan.net/fallback is a good resource for finding out which system font looks most like the intended webfont, e.g. in my use case, Verdana has similar metrics to Roboto Serif.
- kccqzy 1y agoBut there's no guarantee that system-ui is even a sans serif font. Why make that change?
- xd1936 1y agoBecause they're really different? system-ui is the specific font the OS uses for its interface... San Francisco in macOS/iOS/iPad OS, Roboto in Android, Segoe UI in Windows, etc. sans-serif is often Arial or Helvetica, but could be anything.