Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- Understanding basic web principles
- Adding content to a web page
- Linking to web sites and email addresses
- Styling content with CSS
- Creating a layout that fits multiple browsers and devices
- Building an HTML5 layout
- Inserting images and video
- Adding a menu bar
- Creating a contact form
- Integrating a Twitter feed
- Uploading and testing a web site
Skill Level Beginner
CSS3 and HTML5 really give you a lot of control over a lot of your content, including type. And that's what I want to do, I want to add even more custom control over--n in fact, this line right here. I've already added a nice drop shadow to it which I like, but really I want to go beyond this, maybe I want to get rid of the red, and really I want to add a custom font right here, okay, for this Intellectually elegant, because quite frankly, you can't say Intellectually elegant and not have a fancy font. Well, in the past that used to have to be an image, but now I can use a web font for those two words. All right! So, the first thing I'm going to do is change the color.
So, it happens to be my h1. I can change that maybe to white. Here we go! And now for these words, I want to create a new style. So, using the CSS Styles panel, I'll go down, clear it on here into the bottom, and I create a new CSS Rule. And if I take the various selector types, notice how there's like an ID. There happens to be an ID called logo, so I've created that earlier.
There happens to be tags as well which include the h1, but really what I want is I want a class, and a class can apply to any HTML element. Just like a lot of people can belong to a class, well, you can have many elements on a page that have this class, can have this fancy font that I'm going to implement. In fact, let's give it a name of fancy. All right! With that added, that name, I can select OK, and now I can create a CSS rule definition for fancy. All right! In fact, I can take a look at that font family, and before I do that, notice that it created that right over here, here's my class.
But let's take a look at the fonts, pretty standard fonts right here. I'm not impressed. As a designer, I'd want more control. Well, right down here, I can edit the font list. That sounds like a good idea. I can add these fonts which are available on my system, but they are not going to be available on other people's systems. So, I'm not going to worry about those. I need to add a web font, okay? Web font is going to be available to everybody. So, I'm selecting web fonts, and here I don't have any added yet, but I'm going to add one now by selecting Add Font.
And here, since there are different web browsers, I actually need different types. So, I need to add a web font. In fact, I need to add multiple web fonts for various different browsers. Well, more often than not, you're going to have a TrueType font on your machine, and there are actually services available that will take your TrueType font and will make these other different versions. You can go to fontsquirrel.com. There happens to be a font-face generator that will make these additional file types, which is what I've done.
Now if you do have access to the files for this course, what you can do is you can go into your Assets folder, into your Fonts folder. You'll notice this Monsieur La Doulaise-- I hope I'm pronouncing that correctly. But there's that font, including the other fonts that I've used Font Squirrel to convert them to these different types. So selecting the EOT font, selecting Open, it recognizes the other fonts, we're good to go. In fact, I just need to make sure I've properly licensed the above font for website use.
Another service is actually Google's web fonts as well. But this is where this font came from. So, selecting OK, selecting Done, selecting OK, yes, we have to go through all those steps, but now I can select that particular font. Right down here is where it's listed, selecting it right there, and I could click Apply, but I don't have this defined as my fancy class. So, I'm going to select OK.
Now, for this text right here, I'll turn off Live View, but with it selected, I can go to my CSS. And for that CSS, I can apply a new class. Right down here is where it's listed. Okay, so for that part, I can select fancy. Oh! It looks like it changed, but it's not quite the right font. Well, it actually is.
I'll just save my page, and I'll click on Live View, and you can see that it is using that particular font. It looks great! Notice how it added this style sheet CSS. I'm not going to worry about that, but right down here, here's my fancy class, and there it is. It looks pretty good but could be larger. So, my next step is just double- clicking on it and then changing the font size. So, changing the font size to let's try 36. It could actually be larger.
Let's go to about 48, clicking Apply, and you can see how that looks. Looks pretty good, now we'll go a touch larger to 52 just like that. So that looks pretty good. The last thing I'm going to do in this case is go back to my Design View, turning off Live View, and then just moving it up. So, the position from the top, well, I can take that to say 120 just to see how that looks, clicking on Live View. Looks pretty good! One last tweak for that item. Let's take that to 100. All right! Clicking on Live View, that looks good! So, that's how you can implement a web font.
If you do want to see all your web fonts, you can go to Modify > Web Fonts, and that's where you can add your various web fonts and make them available. It will appear in that dropdown list. So, that's adding web fonts, customizing your content, especially your Type content, making it much more flexible and honestly a lot more fun as a designer. So, take advantage of using web fonts in your various designs.