Expanding & fixed width text boxes

The next thing we are going to do, is look at changing our fonts. Now, by default, in our old school web design, you only have some really basic fonts to pick from, like aerial and georgia, and times.

What we can do now though, is we can pick a huge variety of fonts. Now there is a couple of methods to do it. Probably the most common one to do, is something called Google fonts, and that is what we will do in here because it’s quick, it’s easy and it’s free. You can also use Type kit, or Adobe edge web fonts, or squirrel fonts.

There is a lot of different ways of implementing fonts into both your desktop mockup, and through to your website. The big thing to know. is not all fonts that you have on your machine will convert, and be able to be used online. So the way to check is to use a service like google font, to find a font that you want to use. So let’s do that. Let’s switch to google fonts, OK so google.com/fonts

Google have got a whole lot of commercial use fonts that we get to use. So what I’m going to do is, I’m going to look for a font. So I’m going to use preview text of BYOL, because that’s the font that I’m looking for.

I’m going to go through, and pick a font now, - I’m going to use Roboto as my body copy font, and I’ll use the - there’s another one called Roboto Slab that I’ll use for my headings. So to be able to use these web fonts on your desktop, - OK via photoshop, they can later then be used on your website. What you need to do is pick on one of them, click add to collection, so I’m going to use another font, I'm going to type in Roboto here, and I’m going to put in another one I found for Roboto Slab that I want to use, and I’m going to add that to my collection, so I’ve got two added to my collection. The normal one, the normal Roboto and this Roboto slab. Now what we’re going to do is click use.

Now what we’re going to do is click use. Now it’s just picked the basics, - the normal version. what I want is,- I want a light version, and I’d like a bold version, and I’d like, in this one here, a light version. A light version, and a bold version. Now the more fonts you add, - you can add all of these, and download them, - that’s totally fine for while you’re working on your photoshop mockup, - or what will happen if they all have to be used on your website, it’s going to make the page load a little slow. You can see over here, google is giving me a little kind of speed counter. knowing that the ones I’ve got are in the green area, it will load fast enough. Start getting into orange is OK, it’s going to slow it right down, and red is way too many fonts downloaded for a page. That’s going to have lots of slow, -it’s going to impact your page load time too much. So once you’ve got them, what we’re going to do is, we are going to download them to use on our machine. To do that there is this little arrow at the top here, and this little download button, and I’m going to download this collection as a zip file, and I’m going to stick it onto my desktop. Now for you guys if you want to follow along, I’ve already got the fonts ready for you to go. I’ve downloaded them already in the exercise files, and you should find them in the fonts folder.

Now to install the fonts on your machine, it depends if you are on a Mac or a PC. It’s actually essentially the same. If you’ve got a modern PC, or a modern Mac you simply just double click the fonts, and they will install. So this is the font that I just downloaded from the google fonts. If you are looking for the same things, they are in here, in your example files, If you don’t want to go through the hassle of downloading these.

But I have double clicked the zip file, and it opens it up. There’s my little fonts folder, and here are the two groups of fonts. So I’m going to twirl that down, and what I want to do, is , I’m going to select all of these and I’m going to double click them, and click install, and my little Mac is going to charge away, and install all of these fonts here.

Mine have come up with an error now, just to say they are already installed OK, because I’ve done it previously before this tutorial. Yours won’t have them. OK, I’ll close down my fonts folder, - you’ll have to do the same for Robota Slab.

OK select all of these, double click them, and they’ll all install. Now on a PC it’s a really similar process. If you are unsure how to install them on your machine, either drop me a message, or have a little google, and see how you can install them on your machine. Let’s have a look at photoshop now. What you won’t have to do - a good thing about photoshop you won’t have to re-install or restart your machine, or anything like that.

Photoshop will pick up your new fonts. You can see here, there’s my Roboto fonts, and they’re ready to start being used in my design. Knowing because we use google fonts, it’s a font that we can use online for our website in the end.