Tip:
Highlight text to annotate it
X
For the longest time the web has been a very boring place. You had very little choice except
to use fonts that were installed on most computers. So you'd frequently get sites that were designed
in Verdana, Arial, any sort of sans serif font. Generally easy to read, not particularly
fancy or interesting but highly functional. Now we've come to the time in the web when
things are changing. And you can see where we're going with this, I've been practicing.
Google Fonts is one source of free web fonts. I'm just going to show you how I got that
here. I searched web fonts and I select Google Fonts. I like Google Fonts because they're
incredibly simple to use, they are web host which is a little different than the way that
you do it and your book. So I'm trying to show you something slightly different. And
they have all sorts of really really cool fonts out here. So I'm going to pick something
fun and really different from just standard. So I'm going to select this, I'm going to
choose Add to Collection and now I have a couple. And I'm going to go to quick use and
I like that one, it shows you about how much impact on page loud. You don't want to do
too many because it will slow down your page and you can really get carried away. So it
tells you to add this code to your website. So I'm just going to copy and paste. Every
good programmer knows how to copy and paste, and I'll drop in right in here to my head
section. I'll go back out to my browser and I will add this just to the body tag. This
is all online so if anything updates it will update automatically. There is advantages
and disadvantages the book goes through between hosting your own and having them online. I'm
pretty confident with having things online in Google. It's free, I don't need to worry
about royalties. I'm going to put in style, I've already got that in there, style type
text css, OK. So I've already got that put in there. I thought I had. So I'm going to
put in my body tag. I like to sort of tab in these. So I'm going to put in body and
I like to line up my curly brackets. I do things a little bit differently than Dreamweaver
by default. This is from long time as a regular programmer. And I'm going to put in my font
family line right inside the body tag. Which over here, it's not going to do anything.
Don't let that throw you. Because these are hosted on the web you actually have to test
it on the web. If you're connected to the internet and you preview in one of the browsers,
you should see that it comes right in. No for your assignment I'm going to just have
you do a sample page with a few different fonts. Do something fun, like an advertisement
for a band or something that's going to play. Add an image, add some background colors and
use two to three different fonts. If you get more then that it wears the page down and
it also gets to the point where it's just confusing. So I would have at least three
different fonts on the page and I would like to have two of them imported. I typically
don't import my regular paragraph fonts. I usually use a sans-serif that's east to read.
But for headings and special effects things like this can be a lot of fun. But you wouldn't
want regular text written this way because it is kind of hard to read. So you can see
this is it side by side with comparison where we have the default. Much easier to read.
And you can see that's your sample h1, sample h2, sample h3, sample h4, paragraph, small,
emphasis, and strong. And this is so hard to read that I'm actually having to look over
here and see what it really said. So I don't think this is a particularly good font. But
you can use some of the custom fonts to enhance what your page looks like.