78: Understanding Web Fonts: A Squarespacer's Guide to Web Typography

design

Jan 23

When it comes to creating a website you love, typography plays a crucial role. Yet many website owners struggle with fonts that don't display correctly, look different across devices, or slow down their sites. Let's explore why this happens and how to make better typography choices for your Squarespace website.

Understanding Web Fonts vs System Fonts

At its core, web typography is about communication first and aesthetics second. Web fonts are specifically designed for websites and browsers, with optimizations for different screen sizes and quick loading times. They're distinct from system fonts like Arial, Times New Roman, and Georgia, which come pre-installed on most devices.

While system fonts are reliable, they might not give your brand the unique look you're after. This is where web fonts come in - they provide more design flexibility while maintaining functionality across different devices and browsers.

How Web Fonts Work Behind the Scenes

Every time someone visits your website, their browser needs to display your chosen fonts correctly. For system fonts, this is simple since they're already installed on the visitor's device. But for web fonts, the browser needs to download the font file first.

Each web font file is essentially a detailed index of characters, with specific images for every letter, punctuation mark, and symbol. This is why services like Google Fonts have become so popular - they optimize these files for quick loading and handle all the technical details of serving the right format to different browsers.

Technical Aspects of Web Typography

Web fonts come in several formats, similar to how images might be JPEGs or PNGs. The main formats you'll encounter are TTF (TrueType), OTF (OpenType), and WOFF (Web Open Font Format). Some browsers handle these formats differently - for instance, Safari works best with TTF and OTF files.

Choosing the Right Font for Your Website

When selecting fonts for your Squarespace site, consider several key factors. First, any font you use needs the proper licensing - there are typically three types: personal use, desktop (commercial), and web font licenses. For websites, you specifically need a web font license.

Good web fonts should include multiple weights (like regular, bold, and light) and a complete character set. Surprisingly, some fonts miss basic characters like quotation marks or certain lowercase letters, which can cause issues on your site.

Accessibility Matters

Typography isn't just about aesthetics - it's about ensuring everyone can read your content. Some fonts are harder to read for people with dyslexia, while certain script fonts can be challenging for screen readers to interpret correctly. When choosing fonts, consider how they'll work for all your visitors.

Making Smart Typography Choices

For Squarespace users, the simplest approach is to start with the platform's built-in font library. These fonts are already optimized for web use and tested across different devices and browsers. If you want something different, Google Fonts offers a vast library of web-optimized options.

If you do decide to use a custom font, make sure it's:

Licensed for web use
Available in TTF or OTF format
Complete with all necessary characters
Optimized for web performance
Readable across different devices

The Bottom Line

Remember that effective typography is about finding the right balance between brand aesthetics and functional communication. Focus on readability and consistency first, then layer in style choices that enhance rather than impede your message.

With a better understanding of web fonts, you can make informed decisions about your website's typography that serve both your brand and your visitors well.

[00:00:00] (music)
[00:00:04] Have you ever wondered why some fonts work perfectly on your website, while others just don't? Maybe you found the perfect font for your brand, only to discover that it doesn't quite look right on a certain sales page. Or perhaps you've noticed that your carefully chosen typography looks completely different on your phone than it does on your computer.
[00:00:24] In this episode of Think Inside the Square, we're diving into the world of web fonts. . Welcome to Think Inside the Square, a podcast full of tips and tricks to help you create a website that you're proud of. I'm your host, Becca Harpain, creator of insidethesquare.co and in this episode, we're talking about something that affects every single website out there. For a transcript of this episode, along with the links to any resources mentioned, visit insidethesquare.co/podcast
[00:00:51] this episode is sponsored by me, Inside the Square, and I'd like to use this opportunity to promote my course, Squarespace Made Simple. For anyone getting [00:01:00] started with Squarespace who wants to learn more about the best ways to use the program to build your website, Check out my course at insidethesquare.co/start in nine different lessons and guides. I cover all the important things that you need to know about creating your website in Squarespace. This course is and always will be 27 USD for lifetime access. Learn more at insidethesquare.co/start
[00:01:23] Now, let's talk about fonts, one of my favorite topics. In this episode, I want to share some important information that can help you understand how fonts work on the web and how to make smart typography choices for your website.
[00:01:36] before we dive in, I want to share a quick story with you. Last week, I was working with a client who had this beautiful brand guide from her designer. The designer had chosen this gorgeous premium font that perfectly captured this elegant, high end vibe of her brand. But when we tried to use it on her Squarespace website, we ran into all sorts of issues.
[00:01:55] The font was not web optimized. It was slowing down her site. [00:02:00] It looked different on various devices and it didn't fit within some of the containers inside the Squarespace interface. This is exactly why understanding web fonts is so important.
[00:02:11] It's not just about picking something pretty, good typography is about communication first, aesthetics second. In this episode, I'm going to talk about the differences between web fonts and system fonts, and I'll share some practical typography tips that you can use to make sure that your website will look great to every visitor.
[00:02:29] So let's start with the basics. What exactly is a web font? You might think that any font file you have on your computer can work on your website, but it is definitely not that simple. Web fonts are specifically designed and formatted to work well on websites, inside computer browsers. They're optimized for different screen sizes, they load quickly, and they're licensed for web use.
[00:02:52] Now system fonts, are the fonts that come pre installed on most computers and devices. Think Arial, Times New Roman, [00:03:00] Georgia. These are system fonts and they've been around for a long time. They're super reliable because they're already on most devices, but they might not give that unique look that you're going for.
[00:03:10] So here's where it gets interesting, and stick with me because this actually explains why Squarespace is making some font changes this year. Just because a font is installed on your computer, doesn't mean it will work on your website. When someone visits your website, they're using their device to view it, not yours.
[00:03:27] So if you're using a font that's only installed on your computer browser, their browser has to either download that font or substitute it with something else. This is why web fonts were created. They're specifically designed to be downloaded and displayed by web browsers super fast. Now, Inside each web font file, every character has a unique symbol.
[00:03:48] And that's really just a fact of written language, right? Every letter, every punctuation mark, everything is a unique symbol. Now, these characters are like specific images. And a web font file [00:04:00] is a big index or table of all of the images. So it has a very specific image for a very specific character. The exact pixels that are going to go into that space.
[00:04:10] Now that's a lot of tiny details. So loading this file fast is very important. And this is exactly why services like Google Fonts have become so popular. They have this massive digital library of fonts that are specifically optimized for the web. When someone visits your website, their browser can quickly pull the details for each character so it knows how to display them correctly.
[00:04:33] Now this is where things get a little bit technical, so stick with me here. These web fonts come in different file formats. Kind of like how images can be a JPEG or a PNG. The main web font files that you're gonna hear about are true type, which goes by the abbreviation TTF.
[00:04:50] Then we have the abbreviation, OTF, which is for open type, and then WOFF, which is web open font format.
[00:04:58] Now these WOFF font [00:05:00] files? Those don't always work in Safari. That's been a historical issue. Safari works best with TTF and OTF font files. But this is exactly why using services like Google Fonts is so helpful.
[00:05:12] They automatically handle this for you, making sure that they serve the right format of the font file for the right browser. And fonts in the Squarespace font library are designed to work correctly across all devices and browsers. Now you can absolutely install your own font file on Squarespace, and I'm sure by now you understand TTF and OTF, those are going to be the so here's what you need to look for if you're going to buy a font that you want to use on your Squarespace site.
[00:05:38] First, and most importantly, the license. There are typically three types of font licenses. Personal use. Desktop, sometimes referred to as commercial, and then a web font license. Usually a web license will specifically allow you to use that font on your website, and that's what you need to do if you're going to install it on Squarespace.
[00:05:57] Now this is not legal advice, but before you [00:06:00] purchase a font, make sure that it's compatible as a TTF or an OTF, and make sure that you can use it on a website.
[00:06:07] Now, the next thing to consider is kind of technical. A good web font should come with multiple weights, like regular and bold and light, and a complete character set. You'll be surprised at how many fonts out there are missing basic characters, like quotation marks or even some lowercase letters.
[00:06:24] It can be a little wild, so pay close attention. to all of the characters that are available in your font. It's also important to make sure that your fonts are accessible. Did you know that some fonts are actually harder to read for people with dyslexia? Or that certain script fonts, while beautiful, can be nearly impossible for some people and some screen readers to interpret correctly.
[00:06:45] A fancy flourish character could be assigned to a completely random or overlooked character, which would make the text illegible for screen readers. This is definitely important to consider when you're choosing a font to install on your own website, and I'll say it one more time [00:07:00] Typography is about communication first, aesthetics second.
[00:07:04] So let's say you find the perfect font file. You know it is the right type, you know that you're legally allowed to use it, and you're ready to install it in your Squarespace website. It's actually incredibly easy to install. All you need is a little bit of custom code and in the show notes for this episode, I'll include a link to a video tutorial of mine that will walk you through the whole process, step by super simple step.
[00:07:27] Even if you've never touched custom code before, it's actually very easy to install a font file on your Squarespace website. And again, in the show notes for this episode, I'll link to a tutorial of mine, where I'll walk you through the process.
[00:07:38] Now, we covered a lot in this episode today, and if you're feeling overwhelmed by all of this font talk, here's what I want you to focus on, okay? Your number one takeaway. Start with what Squarespace provides. Their font library is carefully curated for both style and functionality, . Now, if you want to change it to something different, I recommend looking at the list available on fonts. google. [00:08:00] com first. And whatever font you choose, Try to keep it simple. I want you to focus on readability and consistency going to purchase your own font to use in Squarespace, again, inside the show notes, I've got a tutorial that will teach you how to do it. Just make sure that you have the right license to use that font file.
[00:08:17] And that it's the right type of font file, I strongly recommend TTF and OTF.
[00:08:23] Thank you so much for listening to this episode of Think Inside the Square. Be sure to check out the show notes at insidethesquare.co/podcast.
[00:08:31] And if you enjoyed this episode, subscribe to my podcast wherever you happen to be listening. Thanks again for tuning in and most importantly, have fun with your website.
[00:08:39] Bye for now.
→ Squarespace Made Simple Course: insidethesquare.co/start
→ Custom Font Installation Tutorial: insidethesquare.co/squarespace-tutorials/custom-font
→ Google Fonts: fonts.google.com