What fonts can I use? Plus font pairing in Figma

Hi ya, in this video we're going to look at what fonts am I allowed to use in Figma, which ones are really common to use, and then we're going to look at a bit of font pairing, kind of sticking free examples together, that look really nice, here we go. That's a good pairing there, just to help you out, if you are unsure about what fonts to pick, and which ones match, all right, let's jump in. 

So what fonts can I use? You can use kind of anything these days, you want to make sure that there is-- whatever font you use, there's a web version of it. Most commonly people will just use Google Fonts, Google Fonts or fonts.Google.com, just is full of free fonts that we can use commercially, and they're available to be used online, and inside of apps. 

So this is a great place to kind of get fonts. Why can't you just use all the fonts on your machine? It's mainly because you need to make sure that they are available, that's a different kind of font that ends up inside of apps and websites. So let's say there's a font that I bought the other day, so let's type in "Scott", I'm going to use capitals, "Scott Headphones", it's this one here, Geograph, I bought it, it's great, I love it, and when I was buying it though, it was here, I was like, "Great, I love this font," I was using it for t-shirt design for one of my last courses, and I went, "All right, I'm going to buy this one because it's a paid font." 

Don't be afraid to pay for fonts, this one here, and I decided that I wanted to use it for desktop version, and I just bought, instead of the whole thing for 300, I just bought the sizes that I want only for desktop, but if I needed to use this for an app or for a website, I need to pay for a different license. So you can-- it will depend on kind of how many page views, so know that you can actually put a lot of fonts online, but that is a bit of a hurdle, a lot of people avoid by using something like Google Fonts, because we don't have to pay for these. 

Google have really kind of, I don't know, beautified the web with their fonts, so you can go through and pick fonts from here and download them. Let's say that, like I've already had a little look through, how I got my fonts, you know, there was one called Crimson Text that I liked, I wanted a Serifed font along with a matching Sans Serif font, so I like this one, I was like, "Great." It's cool, you can type in here, so you can put in my marketing message, "Marketing Message", so you can kind of check what it looks like, and then you can either download parts of them, or download the whole family. 

What's nice about this is, you download them, you put them somewhere, open them up, and install them, you just double click on them, they install, pretty easy. What's really nice about that though is that your developer or whoever's making your website will be able to have access to the same fonts, they'll install them slightly different, they'll probably use a content something, network, something called a CDN, and they, they have different ways of making it happen, but it's the same font, which is nice, so, very common to use Google Fonts. 

There's a lot of alternatives for Google Fonts, if you've got an Adobe License, there's Adobe Fonts, you can use those, kind of free as part of your license, you can go to other sites where you buy them, like this is just an independent foundry that I bought stuff from, beautiful stuff here, but-- this one's called Klim, but you can also go to fonts.com or Envato, we looked at Envato Elements earlier? They have lots of cool fonts in there, Creative Market, there's a million places you can buy fonts, but just know that you might have to buy a specific license, and there are just some fonts that nobody's bothered, to make a web version of it yet, so don't get yourself into trouble. 

Another little bit of a tip is, font pairing, what I find is, like let's say that you do decide that you like, this semi-bold version, look, 600, there you go, there's that kind of like weird numbering again in the 100s, that we did for color, and let's say you do like the 600 version, you select the style, actually, let's not do it that way, let's have a look down the bottom here, what you'll see is, often they'll have popular pairings, with Crimson Text, there you go. 

So Montserrat, is a really common one, you're like, "Yeah, that's a good combo," or maybe Open Sans, these are all other fonts, that you can download from Google Fonts. Now this is not like a typography class, but a nice simple kind of, quite a common way of working, is that if you've picked a font that has a Serif for your, like say, hero text, or your kind of heading text, see these little serifs, these little feet on it, it'd be common to use a Sans Serif as the body copy and vice versa, not, it's not the 100% rule, it's just a really common rule. 

Now if you are new to the font game or design game, you might find something, this term, quite useful, font pairings. So if we're going to use Google Fonts or Adobe Fonts, or whatever it is, the word font pairings is useful, and the results here, let's have a look. I'm going to open up a few of these. Anyway, a bunch of them, and what you'll see is, there is font pairing, somebody else before you, has gone and decided to pair stuff up, this, there we go, there's some examples, finally, Abril with Lato, what do you think? There you go, not, gone that one, this is pretty cool, Art Deco going on. 

Yeah, so lots of examples of Google Fonts that you can-- oh, so many pop-ups, anyway, let's have a look, some more examples, Montserrat Oswald, you don't have to agree, I don't like that pairing, let's have a look, yeah, but these are all downloadable from Google Fonts, and you might just see, like, ah, man, that's it, April Fat Face, Abril Fatface with Roboto, is where I'm going, and just have a little work through all the different ones. 

You can go into the Figma community, there is some font pairing files in there as well, but it can just be a little bit of a leg up, when you are trying to pick fonts for an app or a website, a bit of font pairing. So that's it for what fonts can I use in my Figma files, let's get on to the next video.