Picking fonts in Dreamweaver using Google fonts

This lesson is exclusive to members

Course contents
SECTION: 9
How to backup 4:44
SECTION: 17
Finished 1:58

Questions

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Course info

53 lessons / 5 hours

Overview

NOTE: this course uses Bootstrap 3. Dreamweaver has recently updated to Bootstrap version 4. You can change it back to 3 using the ‘New Document > Bootstrap > Preferences'. Please do this before starting the course.

Some versions of Dreamweaver will require you to download the specific Bootstrap version you want to use and link it within the site. You can download Bootstrap 3 here: http://getbootstrap.com/docs/3.3/

Hi - my name is Dan and I’ll be leading you through this course on how to Make money building mobile friendly websites using Dreamweaver.

I built this course for the visual person, the right brained person. We won't hide from code but we'll use all the visual tools that makes Dreamweaver so amazing.

These are the skills you’ll need to become a professional web designer. You’ll learn how to make responsive websites in Dreamweaver as well as learning what to charge and how to manage a website project.

We cover everything you need to build your first website. From creating your first page through to uploading your website to the internet. During the course we’ll create a website for a mock creative agency - creating mobile and desktop versions. See our example here:

I’m a Dreamweaver Certified Instructor and an Adobe Certified Web Specialist.

With exercise files you can download and work along with me. At the end of each video I have a downloadable version of where we are in the process so you can compare your project with mine making it easy to see where you might have a problem.

I’ll be showing you how to work with Dreamweaver to easily create HTML & CSS websites. How to create mobile and tablet versions of your design and how to test your website on your phone.

I’ll be teaching you how to create navigation bars, how to work with responsive images and favicons.

We’ll work with Dreamweaver’s new Bootstrap integration to easily add carousels, tabbed menu’s and accordions. Even easier you’ll learn to impress clients by embedding videos, calendars, maps, event ticketing & social sharing options. 
 
 Know that I’ll be around to help - if you get lost you can message in the forum and together we’ll get you back on track.

Now it’s time to upgrade your skills, get that better job and impress your clients.

What are the requirements?

  • You'll need a copy of Dreamweaver CC 2015 or above. A free 30 day trial can be download from Adobe here.

  • No previous Dreamweaver or web design experience is necessary.

  • If you're not sure if this course is right for you. Email me what you’re trying to do and check if you’re on the right track.

What am I going to get from this course?

  • 60 lectures 3 hours of content!

  • Forum support from me. 

  • All the techniques used by professional website designers.

  • Ways to preview your designs straight to your mobile device.

  • Firm understanding of responsive web design.

  • Professional workflows and shortcuts. 

  • A wealth of other resources and websites to help your new career path.

What is the target audience?

  • YES: This course is for beginners. For people who prefer not to work in code. Aimed at people new to the world of web design. No previous Dreamweaver experience is necessary. People with knowledge of previous versions of Dreamweaver CC 2014 and below will also get great value from this course as the software has changed so much.

  • NO: This course is NOT suited to people experienced in using HTML & CSS. If you prefer to work in code only then this course isn’t right for you.

Course duration 5.5 hours + your own study.

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Downloads & Exercise files

Download Exercise Files

Transcript

Hi my name is Dan and in this video we are going to look at adding fonts to your website. Now there are two kind of main ways you can add fonts. One is your boring old system fonts; things like Arial, Times New Roman, and Verdana. And the other way is to use hosted fonts. And that would be a surface like Adobe’s web edge fonts or you could use Google fonts. So we will look at both of those. So lets first look at system fonts. So lets look at adjusting this h1. Now I want to change the font of this, I can go to my all, I'm going to go to my main.css, find my h1, find text and font family here, these are my system fonts; boring and there’s not much of a selection there. What we want to do is to look at hosted fonts.

 

So, hosted fonts, the easy way to get to the Adobe hosted fonts, which are called Edge Web Fonts. Lets go to manage fonts and this pops up. Now these are fonts that Adobe allow you to use for free on you website. And to use one, I an go through this big long list and all I need to do is tick one on. So I can click on this one here, say I decide to use Alfa Slab. And I can click done. Now nothing really happens, what I need to do now is click on h1 and on font family; you will see this one called Alfa Slab. Click it, give it a second and it should update. Now if it doesn’t update and it still stays the same font it means that you're probably not connected to the Internet. If you do connect to the Internet, it will update so don’t worry too much about it if its not updating locally, it will work when you put it on a website. So that’s edge fonts, you can go through and pick different fonts for different parts.

 

Now my advice is to make sure you keep the fonts down to a bare minimum so maybe two fonts for your website, three if you have to. Because what needs to happen is, I will show you in the background here, in code view, what’s happening is I'm going to go source code. So I'm in html, source code and I'm looking at code view so I am now looking at the html of the page. What you can see now in the head is Adobe has added this bit of script. And it just says that the following script downloads the font blah blah blah. And you can see here, there is the name of our Alfa Slab One. So Adobe are hosting it for us on something called Edge Fonts and it just means when our website is loaded, it goes and gets that font and loads it on our age. Now if we keep adding fonts, its going to keep increasing the load time. Now fonts are reasonably big in terms of file sizes. So we don’t want to have loads of fonts because our page would take a long time to load and Google doesn’t like that and we don’t do anything Google doesn’t like.

 

Great, so in terms of Edge Web Fonts, that’s all you need to do, you don’t even need to worry about this bit of code, just don’t delete it. And you can start working through the fonts. Now, Edge fonts are great, perfect, built in, there’s no reason you can’t use them, but I'm going to cover Google Fonts now. Why? Because Google Fonts is probably the industries standard, as a web designer, you should know all about Google fonts and it’s going to help us learn a little bit more about code and how that works. Okay so I'm going to undo this and its not just a matter of edit, undo, it kind of works. So I'm going to undo, its going to remove that font. What its done is its removed it from the html code but its still here being called as Alfa One and I don’t want it there anymore. So I'm going to bin it and it should go back to its lovely old Arial self. So to work with a Google Font, you need to go to it’s website. Right, so Google has got a website Google.com/fonts, and there is a huge amount of fonts here. We love them; we love Google because they are giving it to us for free. You're allowed to use them commercially for websites and there is a huge selection.

 

To use them is quite simple as well. What we are going to do is, can you see the preview text here? I'm going to type in “lets make this awesome” just to give it an idea of what its going to look like in all the different fonts. And you can scroll through; there are hundreds of them. What I've selected in my Photoshop mock up is I've used two fonts. I've used this one here called Roboto slab and this one down here just called Roboto. So they’re two separate fonts, they’re in the same family, they look a little different but they relate to each other nicely. So I've got Roboto and Roboto Slab, I'm going to use those two on my website. I can find them over here, so I can type in Roboto, and you can see there, the name is down here, Roboto, there’s Roboto Condensed, I don’t want Mono. I want this one here, Roboto Slab and Roboto. So what I'm going to do is I'm going to add to the collection, great, and its added it to this little bottom piece here, I'm going to scroll down, find Roboto Slab and click add to collection.

 

All right, and now I'm going to go to the one that says use. Now in terms of Roboto, I've got lots of different weights. And we call them normal but in code we’re going to call them this number here; 400, that’s the regular size. I’d like to have 300, 500 and 700. Why? Because in my design, I've used those different sizes around the website, and I'm a bit of a nerdy graphic designer as well so I love fonts and I love messing around with them. The only trouble is, you’ve got to make sure, and can you see over here, it’s in the green? It means that; remember we talked about earlier if you have to many fonts it takes ages for the page to load? There’s a helpful little guy here to say that you’re still in the green, fine. And down here I've got normal but I'm going to pick this one.

 

Nearly out the green, and bold, I always end up about here, if you're going for super fast, you want to keep it as low as you can. I'm pressing into the yellow because I love fonts and I love loads of them. Next thing I'm going to do is I'm going to scroll down the bottom here and there’s two parts I need to do. This part here goes into the head, we saw a little earlier there where Adobe puts Web Edge Fonts into the head for us, we have to manually put this in to use the Google one. So I'm going to copy this, select it all and go copy, edit, copy, jump back into Dreamweaver. So to use this font, I'm going to go to my code view, make sure I'm in source code, and I'm going to find the head tag. Because back in here it says, the instructions to imbed your collection it needs to be the first element in your head tag. So you just need to look for that tag here. There he is there, there it is in my html.

 

So I'm going to put it just after the head and I'm going to paste it and this is my link to my Google font. So very similar to the Adobe Edge Fonts. You can see here it’s got the family of Roboto and its got my 400, 300, 500, all the different sizes plus the Roboto Slabs. And now, it’s available to be used on my website. So the next thing I need to do is jump back in to the Google site and you can see here, this is how to use these fonts. Font family is Roboto sans serif, so I'm going to start with the Roboto Slab because we are styling my h1. So I'm going to copy this and you can see it over here, this is how it should look like in your css. So lets go and do that, so jump back in to Dreamweaver, going to go to my main.css, I'm going to find my h1, there he is there. And I'm going to put a return in and add paste and font family colon Roboto Slab and this thing here, this back up is in case Roboto Slab doesn’t load, the browser knows to just go and load just the basic serif font.

 

Great, lets jump back to live view, you’ll see here it’s now changed to Roboto Slab. Now it’s a little more manual using Google Font, I've got to go through and find all my classes and add either Roboto or Roboto Slab. Its not a big deal and it allows me access to a big volume of fonts that I can sue from Google. One other thing to note for Google Fonts is Google lets you actually download the fonts to use on your machine. And at the moment we are just kind of hinting at them in our code to go off and pull them from our website. If we wanted to use them say, like in my Photoshop tutorials, what you can do is you can go download the fonts and use them on your system. That means you can use them in your print stuff and in your concepts like we have here.

 

To do that on the Google Fonts website, we are going to scroll to the top here and can you see this little button here? This little insignificant little download arrow, if I click this, it says “don’t worry, you don’t need to download them for work on your website”. But if you do want to work locally or use them in say Microsoft Word or Adobe Photoshop like I have, you can download the zip file. You click it, it will download, you open it up and you’ll end up with the fonts. Now I've got the fonts already downloaded for you if you want them.

They’re in the class files; so I'm going to jump to my desktop, so check them out in the Dreamweaver exercise files that you’ve downloaded. Go to fonts and you can see here, there’s Roboto and here’s all the fonts and here’s Roboto Slab as well. To install them both on a mac or a pc, just double click them, okay if you double click them and click install on a mac, on a pc its slightly different but just as easy and they will be installed for you to use locally. Now remember you don’t need to download them to use them on your website, it’s just handy to have them downloaded for you to use in other things.

 

Now the last thing to know about fonts is a nice little way of changing the default font of the whole site. Because at the moment I'm going to change my h1 to the slab, I'm going to change my p tag here, this first paragraph to using just Roboto and I'm going to have to go through and do it for every instance, okay so the p tags, the a tags, any classes, anything I've used I'm going to have to go and change the font for. What we can do just to make it a little simpler for us is we can go and change what’s called the body tag. And the body tag is everything that appears on the page so I will show you on source code. I will go to code view, we talked a second ago about the head, there he is there. Everything that is in the head is everything that the browser sees. So the browser needs to know what font to use, what the page title is and what the description is. The body is what everyone sees on your webpage, it starts here and it goes all the way to the bottom, down here and everything inside of this is stuff that appears on your page. So what we can do as a nice little trick for web design is we can style the body tag and say everything that is inside the body tag become, and in my case, its going to become Roboto. And that just means we don’t have to go through and style all the different tags to say they’re Roboto. I don’t have to go through and say this container is Roboto, this p tag here is Roboto, this h1 doesn’t have to be Roboto. I can just say everything inside the body is Roboto and they all come along for the ride. What’s also good is say that we don’t want the h1 to be Robot but he says because he is inside the body tag he has become Roboto. What I can is, the body is quite broad in terms of what it does, and it’s kind of a broad sweeping stroke.

 

So if I style this to be say Roboto and be red but I want the h1 to be Roboto but I want it to be green, all I need to do is style the h1 and what will happen is the h1 is more specific, so it will override the body. So you can have this underlying body tag styling just the basics, maybe the font, maybe the font size, or maybe the colour and then you an have more specific stuff like the h1 or the p tag or the links or list items, you can be more specific with the colours with those specific tag. So what I am going to do now is change the body tag. That will mean everything inside of here; any tags that I create are going to become Roboto. To do that I need to style the body tag and there are a couple of ways. I'm going to go back to the live view, I'm going to click inside here anywhere and you can see here the body is way, way back up under breadcrumbs. And my tag selector I'm going to click body and I'm going to say with my css, and I'm going to create, is there already a body in here? There’s not, so I'm going to create a new selector, and I don’t want body p, I just want to style the body. Hit enter twice and I'm going to say you my friend, are going to be Roboto. So I've got a tag, he's here in css, I can pick it from here so if I click on text and I click on font family, I could do it if I was using edge fonts, but I'm not, I have to do it the longer way.

 

So I’m going to go to into my main css, in my code view, sorry under source code in the html, you can see here I've still got my link to Roboto and Roboto Slabs. So that’s there, next I need to go to main.css, find my body. Now the body, because he is so broad, he should be at the top. So I'm going to copy him, I'm going to cut him, so I've selected both the open and closed parenthesis, go right to the top and he should go at the top here. Best to have a body right at the top and then later on this h1 can override it because css works from top to bottom. Okay so the body is at the top and then something more specific happens later on, which is the h1, is going to override it. So I'm going to put it in here and I'm going to jump back to Google, find out what the css should look like, now I'm copying this to make it easy, you can type it in obviously, font family, Roboto. Now I'm going to say all the body, be this font here. What I might do while I'm here as well is I'm going to change the font, actually I might change the colour, I'm going to spell it the American way and you type in colour, colon and in my case I know that I want white which is #ffffff and I'm going to close it with a semi colon. Great, so it means that all the fonts in my website now, if I jump back to live view, lets just do a file save all. All fonts that are going to appear on my website are going to be this new Roboto. It doesn’t look this much different from Arial but if you're a bit of a type nerd, it looks a million times better and you can see down here, he's come along for the ride and everything inside here now is white and its going to be this Roboto.

  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2024