My company's website uses Google Fonts to serve our sans-serif (Open Sans) — which is used for most of our headings. A while ago, we noticed that the bold face was loading really slowly, creating a laggy effect whenever a page was loaded. (The font would appear regular and then change to bold after a moment). We decided that the bold was too slow, so we removed the bold from our Google Fonts. We also don't include the italics or light. This means that we have very little creative freedom in designing the site.
In looking over our fonts, I realized that we could solve all of these problems by getting rid of Google Fonts altogether, instead using a strong font stack — which we currently don't have. Instead of just serving Open Sans, we could define our font-family as Open Sans, Lucida, Calibri, sans-serif (or whatever). Then we wouldn't have to worry about lag and we could use bolds and italics no problem — plus, we wouldn't force visitors to download a font.
I mentioned this to our developer, and she argued that the load time on the Google Fonts is negligible, and that using font stacks is ill-advised because it could mess with the design of the site. So, I'm left with a dilemma: should we add bold and italics to our Google Font (significantly increasing the load time, but giving us exactly the font we want) or should we abandon Google Fonts in favor of font stacks, reducing load time but giving up some control of design?
Top comments (10)
You're both correct. I doubt the Google Fonts load time actually negligible. In a usual cases it's negligible, but it's the bad network conditions where it could add serious lag. Bad network conditions is basically most mobile traffic.
They're right in that it could affect the site's design negatively. It's a tradeoff. I'd personally lean towards dropping the fonts. It's going to be tough to get some strong benchmarks on this either way though.
If it's reasonable to do so at this point (but I doubt it is), I'd look to remove all load-blocking resources. Meaning inline critical path CSS and no synchronous JS. This is Google's current recommendations and I agree, but it's really hard to pull off unless everyone buys into the pain of the constraints.
I'm with everyone else that it's basically 50/50 and really just needs to have a bigger discussion between the teams involved to come up with what the best action is for you.
But one thing that I didn't see mentioned in defending the use of Google Fonts (and one of the biggest benefits) is that they are used all over the web (especially Open Sans.) There is a good shot that people coming to your site are having no load issues with it because they already have that font in their local browser cache. It's obviously hard to tell an exact number or really test it (there are ways but would always add additional overhead if that's a big concern, though could just run a short term test to get a general idea.) Just something additional to add to the argument between the 2.
I'm not primarily a designer, so my best interest is less served by using a specific font than by eliminating another possible loading hangup. It always irritates me when CSS frameworks import external fonts. We already deal with cross-browser inconsistency, so font varying a little from design is not a huge deal to me. However, it depends on the site/app. Most apps I deal with are pushing business data around, and nobody has ever complained to me about fonts. Now what it looks like when zoomed in to 175%, that's another story.
It's tough to really vote one way or the other without more specific information. And I suspect that's why you're on the fence as well.
It's entirely possible (even likely) that people will disagree about the relative importance of various considerations. (In your case, creative freedom vs. load performance vs. stability of the site design.) But it's really easy to build consensus if you stick to concrete wins/losses from a specific course of action.
It sounds like the developer is saying, essentially: "Good plan, but this risks breaking a lot of the work the team has done building consistent branding and page design. That's a non-starter."
If abandoning Google Fonts is a possibility, are there other font offerings that deliver better performance and offer the fonts you need?
Do you have A/B test results that tell you what impact the extra load time actually has on users & the business? Is a larger selection of available fonts worth the extra time it takes to load them?
If loading the extra fonts costs you 400ms in page load time, can you gain that back somewhere else?
Quantify the trade-offs, and I think you'll have an easier time seeing a clear course of action and getting the whole team on board.
Hey Sam, Google Fonts typically does a good job of serving fonts. That said, if you are seeing performance issues, I'd suggest hosting the fonts yourself. It is what I do on my own site and it performs quite well.
You can use this tool google-webfonts-helper.herokuapp.c... to download the fonts with the appropriate @font-face tags needed.
I'd also recommend using Fontfaceobserver to help with loading the fonts fontfaceobserver.com/.
Here is a tutorial to pull all of my recommendations above into something actionable zachleat.com/web/comprehensive-web...
What would you say to the comment "people already have the Google Fonts version cached from some other site and therefore I should use their CDN"?
That is a great point to make, but I think taking control of how the fonts are loading and loading them async and using either a cookie or session storage variable to check for repeat views is much better than relying on a third party CDN for your font loading needs.
Using things like Google to get your fonts, or JS, is a privacy leak. A lot of pepole don't think about this, but it's one of the remaining large open gaps in many sites. Every domain that is linked gives that domain a chance to track the users to your site (no surprise, Google isn't offering this service to be nice).
Put this on the list of disadvantages of linking directly to a Google server.
Thanks, everyone! This really helps clarify what I've been thinking and what our developer has been saying. I'm going to take this advice and do some tests on our staging site. I'll report back and let you know how it goes.
I really love a lot of their fonts, but my experience with them--on sites that are purely projects and not even on a true server, just running locally and thus with no actual traffic--that there would not infrequently be barely-noticeable lag/delay, and I wanna say about 25% of the time a distinctly obvious and noticeable lag. And, perhaps, about 10% of the time, reaaaaaaaaally bad lag to flat-out failure.