Web Safe Fonts Alternatives to Montserrat and Lato

Question

A web design company design website for me. However, it largely uses Google font Montserrat and Lato, which lead to totally 40 font files(about 1.4MB) to be loaded when users open my website. And based on GTMatrix, 82% data transfer and 56.1% requests are for font files, which slow down my website greatly.

Therefore, I want to find some web safe fonts to replace Montserrat and Lato, so that:

1. The replacement fonts should look similar to the original fonts.
2. The replacement fonts should be available in most of the visitors' systems.
3. It is better to use a font stack so that there will be fallback fonts if these new fonts are not available on the visitors' systems.

In this way, the browser does not need to load additional fonts when user visit my website.

So, firstly, I try to find fonts similar to Montserrat and Lato, I use the following website:

http://www.identifont.com/

It does bring out 30 fonts similar to Montserrat. I call it set A.

Based in the following references, there are no standard list of web safe fonts:

1. Web Safe fonts - What exactly does that mean?
2. https://en.wikipedia.org/wiki/Web_typography#Web-safe_fonts

What I use is a list at https://www.w3schools.com/cssref/css_websafe_fonts.asp, this list seems looks fine. I call it set B.

Now I try to find a font in both set A and B, with Excel. I can find nothing.

So my question is:

1. Is there a better way to find web safe font alternative to a given font?

2. Since there are no font appear in both set A and B, I plan to use my eye to check the similar fonts manually, I wonder if there is an easier way to do that?

Answer 1

You probably don't need to change the fonts entirely, but you should only be loading the font styles and weights you are using on your website rather than loading all weights and styles. For example, if you are only using 400 and 700 weights in Lato, untick all of the other weights in Google Fonts.

You could also look at font loaders to help with those initial load times, for example: https://github.com/typekit/webfontloader

Answer 2

The list of "web safe" fonts is really small and none look like Montserrat or Lato.

I'd advise you to stick with the fonts your designer picked. You don't have to load all weights (maybe only regular?) and you can host them yourself and use font-display: swap; so the impact on load time is minimized. If that still isn't acceptable you'd have to pick something like Arial or Verdana for a sans-serif that works on both Mac & Windows.

Answer 3

During development, and until clients have signed off on fonts, I use the external embed links Google Fonts provides. This combined with a SASS variable for the font face declaration in CSS makes it really easy to change fonts project wide if necessary.

As part of the final process for putting a site live once everything has been approved, I will investigate those external embeds and download the actual .woff2 files (plus related CSS) and add them to my own site files. This reduces the site's reliance on external links and makes the whole project more self contained.

I've just checked the project I'm currently working on (which uses three fonts in a variety of weights). All of the font files combined only add up to ~160k - nowhere near your quoted 1.4mb. At this size, and given modern network speeds and browser caching, I see no issue using web fonts.

My advice would be to optimise how your site pulls in the fonts you want to use, rather than looking for system based alternatives. If you are not comfortable doing the optimisation work yourself, I would get back in touch with the developers and ask them to fix the issue.