(Close)
Forgot password?
Join Now! Watch Tutorials
macProVideo.com
Close

Join macProVideo.com

Access free tutorial videos, premium articles and project files.

Share this article with friends!

A Primer on Using WebFonts, With a Zombie Theme!

Check out our HTML & CSS: Hypertext Markup Language course!

Until recently your web pages have been limited to the set of fonts available to the browser. But now, with the introduction of Web Fonts, you can deliver a new font to your user’s browser at any time to give you just the right visual look or to increase the impact of your pages. In this quick tip we’re going to show you how to use Google’s font service to make use of custom fonts. You won’t believe how easy it is, so let’s get to it!


Step 1 - Find a Font

First let’s take a look at a web page that needs help. While the red and white on black treatment sure makes the title “Zombies take over macprovideo” stand out, given the subject matter, the look and feel of the page has some room for improvement. One thing we could do is to use a font for the title that reflects the spirit of the content. So we’re going to use a font that’s a little more, well, zombie-like.


To find a font we’ll browse the freely available fonts over on Google’s Web Font Service at: http://www.google.com/webfonts

Looking through all the fonts there, we think the Nosifer font will work well.

Nosifer font


Click the “Add to Collection” button to add the Nosifer font to your web font collection on the site. Then click “Use” to get the link you’ll need to include the web font in your page. On the “Use” page, copy the link from part 3 of the page in “Standard” tab. This is the link you’ll be inserting into your HTML.

Add this code to your website


Step 2 - Adding the Font to your Page

Before we add the web font link into our HTML, let’s first take a look at the HTML and CSS for the page. Looking at the HTML, you’ll see we have a style section and a body section. In the body we have the title of the page within an h1 element (otherwise known as the main heading), and the rest of the page content within the p (or paragraph element).

In the style section, we’re using CSS to specify the style of the elements on the page. There, we have a rule that sets the background color of the body (in other words, the whole page) to black. We also have rules that set the font size and color for the main heading and paragraph elements in the page. In this case we’ve set the font size of the text in the heading to twice its normal size and set its color to red, and we’ve set the color of the text in the paragraph to white.

<html>

  <head>

    <style>

      body {

        background-color: black;

        margin: 20px;

      }

      h1 {

        font-size: 2.0em;

        color: red;

      }

      p {

        color: white;

      }

    </style>

  </head>

  <body>

    <h1>Zombies take over macprovideo</h1>

    <p>

Etiam et risus ut nibh molestie bibendum eu nec diam. Etiam porttitor lacus nec turpis vestibulum ac volutpat tortor bibendum. Morbi commodo ultricies metus. Nulla rutrum sagittis lacus cursus porttitor. Morbi condimentum mauris at lorem aliquam id rutrum nisl aliquet. Cras a lorem eu velit hendrerit blandit sit amet sed magna. Aliquam erat volutpat. Sed diam nulla, vulputate id sagittis vel, luctus eu turpis. Mauris scelerisque turpis ut lacus iaculis tincidunt ac id urna. Etiam et ullamcorper tortor.

    </p>

  </body>

</html>


Getting back to adding a font to this page, all we need to do when we’re using Google’s Web Font Service is to add the following link tag:


    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Nosifer">


This is the same tag that you copied from the “Use” page in the web font site in Step 1. This tag tells the browser to retrieve the Nosifer font from the Google Web Font Service and to make it available to the page.  We’re going to insert this link tag just after the <head> opening tag in the HTML:


<html>

  <head>

     <link rel="stylesheet" type="text/css"   href="http://fonts.googleapis.com/css?family=Nosifer">

    <style>

      body {

        background-color: black;

        margin: 20px;

      }

… rest of CSS and HTML goes here …

</html>


Step 3 - Using the Web Font

So far all we’ve done is to tell the browser to retrieve the Web Font when the page is loaded; now we need to change the style of the page so that it makes use of the font. To do that we use the same CSS property that is always used to specify the name of a font: the font-family property. So, we add this line to the CSS rule for h1:


h1 {

        font-family: Nosifer, serif;

        font-size: 2.0em;

        color: red;

}


The font-family property specifies a list of fonts to be used for this element. This list is in order of priority, so the browser begins at the first font and attempts to use it; if that font isn’t available, then the next is used, and so on. Here we have two fonts, the Nosifer font and a generic, default serif font. If for some reason the Nosifer font can’t be retrieved and loaded by the browser, then the browser will use whatever serif font it uses by default. Of course, you could add more fonts to this list if you wanted.


Step 4 - Testing the Web Font

At this point we can load and test the web page. When the page is loaded the browser retrieves the Nosifer font from Google’s Web Font Service, and then applies it to the h1 element. Quite a difference, right? How’s that for adding some impact with just a couple lines of HTML & CSS?

Testing the web font


Step 5 - Going Further

The great thing about Web Fonts is that they are real fonts, so we can do anything with them that we can with the standard browser-based fonts, like add more styling. Here’s an example of adding a simple text shadow to the text:


      h1 {

        font-family: 'Nosifer', serif;

        text-shadow: 6px 6px 6px #cc0;

        font-size: 2.0em;

        color: red;

      }


And let’s see what that looks like:

Web Font with shadow


Now that’s what we call Zombie! 

The text-shadow property takes four values: an x and y offset, a blur value, and a color. The x and y offset specify how far from the text the shadow should appear; in this case, we’re specifying that the shadow should be 6 pixels to the right (x) and 6 pixels down (y) from the text. And the blur value is just how fuzzy the shadow should look; in this case, we want the shadow to be pretty fuzzy, but still somewhat readable behind the letters. Finally, the color is specified using a “hex code”; in this case, that “hex code” color is equivalent to a ooz-like yellow.


Step 6 - Next Steps

We’ve only scratched the surface here of what you can do with Web Fonts (not to mention Google’s Web Font Service). To learn more about CSS, styling and fonts in general, check out our Web Design tutorials!

And for more on Google’s Web Service refer to the documentation at: https://developers.google.com/webfonts/docs/getting_started


Check out our HTML & CSS: Hypertext Markup Language course!

Wickedly Smart

Wickedly Smart | Articles by this author

Wickedly Smart is Eric Freeman and Elisabeth Robson. Together, Eric and Elisabeth have inspired, entertained and educated over a quarter million people with their award-winning books. Strong in story telling, narrative and humor, Eric and Elisabeth’s books have captured the attention of the technical community, and are among the highest grossing books in O’Reilly’s trade book lineup. The books have been widely adopted in academia because of their strong appeal to students: Harvard, Yale, the University of Maryland, Brooklyn College and the College of Santa Fe are among the many institutions, domestic and foreign, that use Head First Design Patterns and Head First HTML and CSS for instruction. Translated into eight languages, and frequently pirated on the Internet, Eric and Elisabeth’s books have enduring appeal. In addition to their publishing success, Eric and Elisabeth both have significant experience in the media and publishing industry. Eric, a former executive at The Walt Disney Company, was the CTO of some of the worlds best known and loved web properties, including Disney.com, Club Penguin and the sites across the Disney theme parks. Elisabeth previously drove training content for O’Reilly Media and before that directed the Head First Series.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2014 macProVideo.com
a division of NonLinear Educating Inc.
Link