Fonts

- [Voiceover] We all use fonts on our websites these days especially hosted fonts. So when you're designing for performance, fonts are something you need to take an extra look at. So let's talk a bit about fonts when it comes to web and trying to optimize your design for the website. Less is better. I can't stress this enough because a font file is a file that needs to be downloaded. If it's 10k, if it's 100k, it needs to be loaded to the device or machine that somebody's looking at your website on. So if we use 10 fonts on one page, that's 10 separate downloads for each font file that's necessary to get it to look the way you want it to. So less can be better. A lot of us probably wouldn't want to hear this but try and use system fonts where they will do. There's a lot of times where a new, special font might not be necessary, something that's smaller, you know, out of the way perhaps, where we don't have to use a hosted font. Now this is not always the case. We want our designs to look good, I know that. But there's a website here you can go to which will actually show you the different default fonts on the different operating systems, and typically these are the mobile operating systems like iOS, for instance. It'll give you an idea of what's there and what you can use. We all plan on using hosted fonts for our sites because it gives us a wide variety of fonts to use and that includes Google Fonts, Typekit fonts, which are part of a Creative Cloud subscription from Adobe. Fonts.com, just tons of different hosted font choices. You need to be careful with these simply because if it's not a recognized or larger, let's say, company, maybe they might not have a CDN to deliver the fonts. Content Delivery Network is what that means. They might not also have FOUC under control. FOUC, believe it or not, stands for flash of unstyled content and, if you don't have certain code in there right, it might look kind of bad initially with a default font and then basically flip over to the real font soon as everything is loaded. And free may not be the best. You need to test this out. If you're using a lot of fonts from, you know, a source that might be free, it might take a while to load. It depends on where their servers are. They could be overloaded, it really, really depends so this all comes down to testing things and picking a reputable place to get your fonts. You can host your own fonts if you want to do that. You want to make sure that you have optimized fonts and sometimes, that can't be helped. You're given a font, here, use it on your website blog. But if you can help it, you can get optimized fonts which means they may only have specific styles you need instead of a font that has, you know, Regular, Italic, Bold, Bold Italic, all these different things that you're not using and that adds to file size. One thing I do suggest to designers when they are actually designing this thing. I don't know how you're going about doing that. Maybe going into Photoshop, Sketch, Illustrator, whatever, and laying it all out or you creating something like a Moodboard or however you do it, ok, at some point, we need to have the hosted font, right? At least what it's going to look like to be able to portray it to others so we can design with hosted fonts like Typekit, Google Fonts, different things we want, Fonts.com, and here's how we can do that. If you're working in Photoshop CC, Illustrator CC, the different Creative Cloud programs, what we can do, is we can select some text and if we want to use, let's say Typekit fonts, which are great for using on the web and I've used forever, you can select text in one of these applications. Come up and choose a Font, and you'll see Add Fonts from Typekit. And the great thing about this is we can filter based on web fonts, which means we can design with the Typekit fonts here and then we can actually use the Typekit fonts on the website by grabbing some code later on. And that's up to you or your developer, ok? Once again, we're going to try and keep this a little bit simpler. If I click, Add Fonts from Typekit, it's going to go out to a website. It will let me sort by web fonts down here and the list will probably change a little bit. Then I can go in and start to use fonts either sort by type, let's say Serif, Sans Serif. When I go to use a font, I can sync the fonts and the great thing about this is you can tell it what styles you want here. There's usually a bunch of styles. I can sync the font and then I'm pretty much done. Now that's as a member of Creative Cloud. You can see that they're are synced right there. This is called Acumin. If I go back over to Photoshop, and take a look. I can select the text again, come up, and even, you know, sort based on that, and there we go. You can see that it's ready to go. And once again, this is something that you can also use on a website because I chose to filter for web. That's pretty great. Now if you're not using, let's say Typekit fonts, and you need to use Google Fonts or something from another fonts supplier like Fonts.com, there's a bunch of them out there. Now what you could also do is there are other applications out there that you can use to download fonts from let's say, Fonts.com or Google Fonts. I'll got out here and choose what's called Sky Fonts. This is an application that I have installed. I'm going to open it up real quick. There we go. Now if I take a look up here, you'll see that I can go through and I can actually sort and pick fonts based on, you know, whatever I want. So I come up here and say, ok, let's go to the Settings for this, you'll see right here for Accounts, we can choose from Google Fonts, browse them and download them directly to your machine so that you can use them within your designs before you, you know, send this off to someone else, for instance, or if you buy fonts from other services, you can link to those as well. This is pretty great 'cause that makes them available to you when you're designing. So there are a few things that you need to think about when it comes to fonts. And it's really super important. Some of them are more obvious than others but keep them in mind as you design.