3 ms·

What's the substitute to not using custom fonts? Or is there a better way to load it? I'm having a hard-time convincing our brand team to defaulting to a system

by ta-run 4y ago

What's the substitute to not using custom fonts? Or is there a better way to load it? I'm having a hard-time convincing our brand team to defaulting to a system font.

lexicality 4y ago
Convince the brand team to pick a couple fallback system fonts and swap the brand font in after it has loaded. You will have a bit of content reshuffling no matter what you do but it's better than the alternative. There are directives to do this in pure CSS but I seem to remember they had some unfortunate implementation bugs so when I did this it was easier to do it in JS.
smoe 4y ago
There is some interesting things you can do with font-display and other css properties. E.g hide text for up to 100ms, if custom font has loaded swap to it, if not use fallback font. https://simonhearne.com/2021/layout-shifts-webfonts/ https://simonhearne.com/2021/layout-shifts-webfonts/
kevincox 4y ago
For most things just using the user's configured font is almost as good, if not better. For cases where you really want to make something stand out custom fonts can be nice but you can also try using "font stacks" that the user has already installed. In general I recommend using the default font for "body text" because you know it is something that the user finds easy to read. For headings, buttons and smaller strings of text you can be more creative but even then you can consider things like trying system fonts first and deferring the custom font load until after the content.
- nirimda 4y ago
  > In general I recommend using the default font for "body text" because you know it is something that the user finds easy to read. A lot of users don't know how to or can't change the default font. For instance, I have no idea idea how to change the default font on my phone, or even if I can. It's probably better to say "at least you know it's something that was selected to be at least tolerably usable by most people, which cannot be said of the design team's fancy spindly small-x font".

by ta-run 4y ago

What's the substitute to not using custom fonts? Or is there a better way to load it? I'm having a hard-time convincing our brand team to defaulting to a system font.

lexicality 4y ago

Convince the brand team to pick a couple fallback system fonts and swap the brand font in after it has loaded. You will have a bit of content reshuffling no matter what you do but it's better than the alternative. There are directives to do this in pure CSS but I seem to remember they had some unfortunate implementation bugs so when I did this it was easier to do it in JS.

smoe 4y ago

There is some interesting things you can do with font-display and other css properties. E.g hide text for up to 100ms, if custom font has loaded swap to it, if not use fallback font. https://simonhearne.com/2021/layout-shifts-webfonts/ https://simonhearne.com/2021/layout-shifts-webfonts/

kevincox 4y ago

For most things just using the user's configured font is almost as good, if not better. For cases where you really want to make something stand out custom fonts can be nice but you can also try using "font stacks" that the user has already installed. In general I recommend using the default font for "body text" because you know it is something that the user finds easy to read. For headings, buttons and smaller strings of text you can be more creative but even then you can consider things like trying system fonts first and deferring the custom font load until after the content.

nirimda 4y ago
> In general I recommend using the default font for "body text" because you know it is something that the user finds easy to read. A lot of users don't know how to or can't change the default font. For instance, I have no idea idea how to change the default font on my phone, or even if I can. It's probably better to say "at least you know it's something that was selected to be at least tolerably usable by most people, which cannot be said of the design team's fancy spindly small-x font".