Fonts - Introduction


What are fonts?

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 http://jordanm.co.uk/tinytype/ 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.

Using Different Fonts
 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 ofa Creative Cloud subscription from Adobe.Fonts.com, just tons of different hosted font choices. 

1)    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. 
2)    They might not also have FOUC under control. FOUC, 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.