Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In XHTML and HTML Essential Training, Bill Weinman helps designers and coders understand XHTML and HTML. In the process, Bill covers document structure, block and inline-level tags, floating images, controlling white space, phrase and font markup, and tables and frames. He even provides a good introduction to CSS. Bill offers step-by-step guidance for building a complete working web site. Exercise files accompany the course.
This lesson is about using the font tag to change the font of text in a document. The font tag is an inline level tag. So it's important to know that you can use it inside a paragraph. It is not proper to use it outside a paragraph and have a paragraph contained in it. It's common and it works, but it's not correct XHTML. So let's take a look at how this works. Here we have a paragraph, and there is a paragraph in the browser down there. Let's say that I want to change the font of the text of the paragraph.
So I'll use a font tag here, and I say font face = and I can say "arial", which is a sans-serif font that's available in Microsoft Windows and on other operating systems. Close the font tag here. Now you'll notice that the font tag is after the P and the close font tag is before the close P. So that makes the font tag inside of the paragraph. You will see other arrangements, which are not correct. Sometimes even you'll see the text straddling the paragraph like this, where you've got the beginning of the paragraph outside of the font and the end of the paragraph inside of the font.
That is not correct and don't do that. So here we have the font tag done correctly and I'm going to save it and we'll reload in the browser, and we'll see that we now have this lovely sans-serif Arial font. So some other interesting things that you should know about the font face argument. One is that you can say sans-serif like this and then whatever is the default sans-serif font in the user's browser is the one that will be used. And this is very, very valuable. So I save it and go ahead and reload in the browser.
You see that we still have the Arial font and that's because Arial is the default sans-serif font in the Microsoft Window's operating system. So that is the font that comes up. If the font is something different in the user's operating system, it will use that one. The value of this is that not everybody's computer has the Arial font or not everybody's computer has Helvetica or something else or maybe it's not called something or quite spelled the way that it's spelled on your computer. So if you want a sans-serif font in your document, if you use sans-serif instead of specifying Arial, it will come up sans -serif in all of the places where there is a sans-serif font available in that browser, even if it's named something different than it is in your computer.
So this is very valuable shorthand. In addition to sans-serif you can say serif and you'll always get a serif font. Save that and reload, and the default serif font is probably Times Roman on this computer here. Or you can say monospace, like this and you'll get whatever the default monospace font is, which in this case I believe is Courier New in the Microsoft Windows operating system. Another thing that's useful to note is that you can specify several fonts.
You can say verdana, helvetica, sans-serif, like that. It will go ahead and save that, and what this will do is it uses Verdana if it's available, and if it's not available, it will use Helvetica. If neither of those will available, it will use whatever sans-serif font is available. This way you can specify the one that you like and still have it default to something that is reasonable for your document. I'll go ahead and reload this and you'll see we have Verdana available on this computer. If I misspell Verdana, then we'll get the second one in the list here.
I use this technique for testing my lists, just to make sure I get what I expect. So I'll go ahead and save this and reload and now we get Helvetica. If I misspell Helvetica there and save that, we'll get the default sans-serif, which probably looks very similar. It would be the Arial font. So I believe on Microsoft Windows Helvetica is alias for Arial. So we get exactly the same thing there. So this is how the font face tag works. You use it to specify the fonts that you want to use to display your document.
You can give it a list of fonts and it's always a good idea to end the list with a default value for the type of a font that you want so that if none of the ones you've specified or available, you'll at least get a serif font or sans-serif font however it is that you want it to be in your document. Keep in mind that not everybody has their browser setup to default to a serif font. So if you really care about your document being displayed in serif font, go ahead and specify it in a font face tag.
Find answers to the most frequently asked questions about XHTML and HTML Essential Training.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.