Whenever I start a new project, I try to make sure I decide on a good font stack for web safe fonts. This is my process.
Whenever I start a new project, I try to make sure I decide on a good font stack for web safe fonts. I'll usually start at CSS Font Stack.
I like to decide on my font stack based on availability to users and CSS Font Stack has good statistics on what fonts are available at what percentages to windows and mac users.
After I've picked my web safe fonts, I go to Google Fonts. There's a huge selection of fonts and one of the best features is seeing the size of the assets requested and about how long it will take to request them.
If you can't find what you want there and you know your traffic is going to be low, Webtype.com has free trials for fonts for 30 days, and a $20/year plan for sites with less than 10k visits a month.
If you can get away with it, use web safe fonts. Not only will this ensure your users get consistent experiences, but it also minimizes the amount of requests your site is making for extra assets, which means lower pageload times.
Choosing the right fonts for a project for the web may seem easy, but it's always good to make sure you go through the right process of picking fonts that provide consistent experiences.
Hey, I'm Chase. I help aspiring entrepreneurs and makers turn their ideas into digital products and apps.
A figma community project of vectorized hand-drawn arrows.Go To Figma
A figma community project of vectorized hand-drawn lines.Go To Figma
A figma community project of vectorized hand-drawn shapes.Go To Figma
Subscribe to my Newsletter
Every other week I publish the Curiously Crafted newsletter.
In it, I explore the intersection of curiosity and craft: the people who make stuff, what they make and the way they pursue the craft of making.
I'm on almost all social media as @curiouslychase.