Embedded web fonts can add stylish typography to your web design for just a few kilobytes. Techniques that used to require large, slow-loading images are now handled with lightweight font files and several lines of CSS. Ever since the @font-face CSS property garnered broad support from all major browsers, specialized fonts have become very popular. As a result, a wide variety of web font services have appeared to harness the potential of embedded fonts.
There are quite a few very popular font services, and some very big names have created their own font libraries. Typekit (by Adobe) is a well-known font provider, and Google offers an extensive font library as well. There are dozens of lesser-known but equally worthy sites such as Fonts Live, Fontdeck, and Webtype.
The advantages of embedded fonts are numerous: Changes to even the most prominent lettering on your websites are easily done without the tedious task of loading your original design in Photoshop, correcting headers or taglines, and exporting. And, consciously choosing a font that works well with your other aesthetics is almost certainly better than deferring to a ubiquitous font like Helvetica or Arial — or worse — letting various browsers dictate how your text will show up based on their own defaults. Lastly, making your large lettering out of actual text (instead of images of text) may offer some SEO and site speed benefits that could place your site more prominently in search results.
But, web font services do have a few downsides that come with all of that stylish typography. Relying on an external site for font information could create noticeably slower page loads, and the fonts could be missing entirely if the external font library is down or if your installation somehow broke. There are many fallbacks to help your site “fail gracefully” if a problem occurs with your preferred font, but few designers want their design to be compromised, whether it’s done “gracefully” or not. It’s hard not to rely on your preferred fonts, and as a result, a font-dependent site can look very ugly and odd if those carefully-chosen fonts go missing. The added cost and increase in loading times may be small, but they’re nonetheless part of the price to pay for pretty typography.
And, the reality is that all of these services are based on @font-face, which is freely available for everyone to use independently.
Do you have a preferred font library? Do you work directly with @font-face instead? Or, do you avoid specialized fonts altogether?
Five Ways to Remove Backgrounds in Photoshop in 2021
By Amber Leigh Turner,
Need to remove an image background? Learn five ways to remove backgrounds in Photoshop, depending on the kind of image you're working with.
Figma Prototypes: A Quick, Step-by-Step Guide to Useful Mockups
By Daniel Schwarz,
Take your wireframes and mockups to the next level by creating interactive FIgma prototypes that are navigable and animated. Here's how!
5 Web Design Trends for 2021
By SitePoint Sponsors,
Web design trends come and go. 2020 was no exception. Web designers will see some familiar trends replaced by safer and more dependable design choices.
Peter is Chief Digital Officer of CuriosityStream, a multi-platform nonfiction streaming service by the founder of Discovery Communications (Discovery Channel, Science Channel, Animal Planet, etc.). Peter is also Co-Founder of True North, a management consulting firm and digital marketing agency with clientele that includes WebMD and Salesforce.