Use Web safe fonts or iOS or Android specific fonts in Adobe XD

Hi there, in this video we're going to look at how to bring in fonts from both Chrome and TypeKit, and bring them into XD and why we need to pick a couple of fonts, and only a couple of weights, otherwise our website or app will explode. Let's go and check out why in this video. 

So when it comes to picking fonts for your prototype you need to pick a font that's going to be able to be used in either an app or a website, and not all fonts can be. So if you've got fonts on your computer at the moment, you can't just go through and pick any of them. The easiest way to find a font that can work online is to use Adobe's TypeKit or Google Fonts. We'll look at both of these. 

TypeKit here, I'm going to go to 'Browse' and what you'll find is, pretty much everything on this site here is able to have a web version of it. Let's go through and pick any old font here. And what I'm looking for is - when I click on it - I'm looking for both of these options. There's the Sync option, and then there's-- see this little brackets here, that indicates there's a web version. That's totally fine. The other thing you can do in here, is just to enable when it's turned off, including web only font. There are some fonts that only allow to use online, and not used in print. 

Now if you're not sure what TypeKit is, TypeKit is part of your Creative Cloud license. So you can login with your Adobe ID, and all of these fonts are allowed to be used commercially. And there are just some really nice fonts in here. Some other things you might consider when you're downloading a font is, over here on the right, you've got some Filters. Just really helps kind of work out. I want to look for a body copy font, I can just cut it down to simple Sans Serif fonts and get rid of all the hand drawn ones. Likewise you can turn on 'Hand', and you'll only get hand drawn fonts. 

The other things to look at is potentially, this is probably my most important one - I'm looking at a web font - is the width. I like to try and find-- it's not always necessary, but I like to find the Hand turned off. I want to find a width that is quite narrow, just so that I have the potential, especially for the Heading font. That there is-- I just get the ability to add more characters to a heading. If you pick a really wide font you'll only be able to have really short headings before they break on to two lines. I don't know if it has all the features, but it's pretty cool down here. You can see at the top here, I've gone and changed the text. So you can leave it as blank, but you can also add your own name up here. 

So that you can see what the characters look like before you download them. We are ready to pick one. Say you decide that this is the font for you. Actually what's the one we're going to be using? I'm going to go out to 'Search' at the top here, I'm going to use Fairplex. Before I do that I need to turn off some of these filters so that I can find 'Fair', and there's Fairplex there. So I've decided this is the font I want. All you need to do is click this button that says 'Sync'. I've already synced mine, and that's it. What will happen is, as long as you're logged in to your Creative Cloud-- you'll see, up here, I'm logged in to mine, that's my little face. If you're on a PC, that's down the bottom right. And what ends up happening is it just magically appears in XD. So nothing else you have to do. 

With Google Fonts, very similar. Google Fonts in here, you pick a font. They've got a similar sort of filtering down the side here. Say you pick a font-- I'm going to use Roboto. Roboto is like super, it's the new Arial. That, and Open Sans, if you go to all the websites made in the last five years, I bet you, the body copy is one of these two. All sort of Sans. I'm going to pick Roboto, just, I like it, it's got some nice weights. When you are using it, there's a little bit of extra stuff you need to do. Say you decide, "Roboto's for me." You click on that little '+' icon, and this thing appears down the bottom here. You click on it, and what you need to do is, see this download button here? This is showing you how to use it on a website, you're not at that point. We're mocking it up locally on our computer. 

So what we need to do is, click 'Download', and-- the cool thing about this, is just, it's a font you can download. I'll stick this in the exercise files. I'll make a folder in there called 'Fonts'. And you'll be able to use Roboto as well. And all you need to do is, open it up and install the fonts you need, all those True Type fonts. So this is just a cool resource for any design project you're working on. There's loads of fonts, you just got to remember to click this obscure little button to say 'Download to your computer'. Then on a Mac, you just double click these. I think on a PC, it's just as easy, just double click on them, and they'll start installing. 

Now our next consideration is weights. So I'm going to jump into our XD project. And I'm going to set up a couple of basic font structures to get started. I'm going to use Fairplex. And I'm going to use for my big kind of Calls to Action. I'm going to zoom in a little bit as well. Now, when you are dealing with fonts and trying to pick sizes, make sure you're at 100%. Just so that you are aware of how big this is. This is how people are going to see it, both on the app, and on a website. So, I'm going to pick Fairplex over here. Fairplex Narrow. That's the one that I'm using. And now I want three sizes, so I'm going to have this big one, I'm going to have a smaller one, that's going to be 36, and I want another one. It is about 24. So those are the kind of sizes I'm going to start with. You don't have to pick font sizes, you can just start working, and back track, but you want some consistent sizes of fonts for no technical reason, other than more design theory where loads of different fonts and loads of different sizes gets confusing for the user. So that's the simple hierarchy of most important, next important, last important, in terms of my headings. 

Now in terms of weights, when I say weight, I mean, light, medium, bold, black. So I could decide I want kind of Book version for this top one, then I want-- I really like this one to be a bit more bold and I want this one here to be black. But the consideration here is load times for websites and apps. Every time you pick a new font and a new size, the computer has to download that before that page renders. And why is it important? It's because load time is super important for lots of reasons. One of them is, Google rank sites based on how fast they load. The more fonts you have, it really slows it down. Of course, just general load time. When people come to your site they don't want to be sitting around waiting for the site to load because you've picked 10 fonts with 10 different weights. So try to, if you can, keep your weights as small as you can, because already we're getting quite high, I'm going to use 'Book' for all of these but also, I'm planning to use Roboto. 

So I've actually, only at the moment installed one font, one weight. Fairplex and Book, even though it's different sizes, that doesn't matter. So those are going to be my heading sizes. In terms of colors, I'm going to select them all and make them black for the moment. Probably, while I'm designing, I'll adjust these. 

Next thing I want to do is I would like to create another text box for Roboto. You go up here, and the larger size I'm going to use for Roboto, is going to be 24, and that's going to be for most of my headings. I'm going to pick black. 20 is going to be my sub headings and this one here, 16 will be my body copy probably for most of the document, 16 is a typical body copy size. Between about 13 and 16, I'm using the largest size because I'm not going to have a lot of blog posts like heavy chunks of text. Most of mine is going to be marketing. So you might go a little lower for yours. 14, I'm going to use for my balance. Looks nice. 

Now in terms of the font sizes I'm going to make the buttons bold. And I'm going to make my sub headings bold as well. So I've tried to keep the font weights down to a minimum level. You might be doing yours a bit differently, you might be just designing and you might come back, and kind of tidy up, and decide "I just need to put a few fonts, not all of these ones throughout it." So two fonts, and three weights, it's getting a little higher in the download speed. What you can do in Google Fonts here, there is a Load Time thing here. What you can do is, say I've picked Roboto, and added it to my family, I can go to customize and say, actually I'm using Roboto Light. And I'm going to use Bold. You can see, the load time is still fast, that's awesome. But then if I go and add another font, and, do they have Fearfax in here? They don't. Playfair looks very similar, so we're going to go into this one. We'll add it to our kit. And you can see, there's two font families down the bottom here, and you can see, 'Moderate'. So I'm going to click on Fairview, and I'm going to say "Actually I want the bold and the light version." We're starting to get into the orange zone. If you keep adding them, eventually it's going to go red and say, "Too slow." The internet's going to hate your site. Hate's a strong work, it's going to dislike your site. And not rank it very well, which is not good. 

So this long video is really, just pick a couple of fonts with only a couple of weights, otherwise the world will end. All right, let's get on to the next video.