Home arrow HTML arrow Page 4 - Using the Google Font API`s Bold Argument
HTML

Using the Google Font API`s Bold Argument


In this fifth part of the series, we examine the “bold” argument provided by Google’s Font API. It's used for requesting and downloading the bold style of a specified font family. As with the “italic” option discussed in earlier parts, you should use “bold” on web pages with due caution and responsibility (or in other words, don’t commit the cardinal sin of displaying all your HTML elements in bold!).

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 4
June 23, 2010
TABLE OF CONTENTS:
  1. · Using the Google Font API`s Bold Argument
  2. · Review: using the i shorthand for italics
  3. · Introducing the bold option
  4. · Including the CSS styles in a web page

print this article
SEARCH DEVARTICLES

Using the Google Font API`s Bold Argument - Including the CSS styles in a web page
(Page 4 of 4 )

The best way to see how a given argument provided by the Google Font API does its thing is by example, and the "bold" option isn't an exception. In the lines to come I coded a new web page that includes the CSS styles defined in the preceding segment, so you can quickly grasp how to work with this argument. Here's the corresponding code sample: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Using the Google Font API (with the bold option)</title>

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

<style type="text/css">

body {

    padding: 0;

    margin: 0;

    background: #fff;

    font: 1em Arial, Helvetica, sans-serif;

    color: #000;

}

#wrapper {

    width: 960px;

    margin: 0 auto;

    background: #f4f4f4;

}

#header, #content, #footer {

    padding: 20px;

}

h1 {

    font: normal 46px 'Cantarell', Helvetica, sans-serif;

    color: #00f;  

}

h2 {

    font: normal 40px 'Cantarell', Helvetica, sans-serif;

    color: #ff8040;  

}

h3 {

    font: normal 32px 'Cantarell', Helvetica, sans-serif;

    color: #ff8040;

}

p {

    font: normal 14px 'Nobile', Helvetica, serif;

}

</style>

</head>

<body>

<div id="wrapper">

    <div id="header">

        <h1>Using the Google Font API</h1>

        <h2>Header section</h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>

    </div>

    <div id="content">

        <h2>Main content section</h2>

        <h3>Subheading section</h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>

    </div>

    <div id="footer">

        <h2>Footer section</h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>

    </div>

</div>

</body>

</html>

Have you ever wanted to decorate the heading elements of your web pages using a commercial font, other than Arial, Tahoma or Verdana? Well, thanks to the flexibility offered by the Font API you can do exactly that without having to empty your pockets, as Google already paid the foundries for you. In the example above, the elements will be displayed in bold due to the use of the bold argument, but as you learned before, it's possible to render the headers in normal and italic styles with the same ease.

Here's an screen capture that shows the result obtained after applying the "bold" option to the H1 element of the previous web page: 

So far, so good. At this point, you've learned how to use the "bold" argument with a single font family. The Font API makes it possible to utilize the argument with multiple fonts, but this time this task will be left as homework for you. So by all means, get to work and start getting the most of the "bold" option. The experience will be fun and educational.

Final thoughts

In this fifth part of the series, I took a detailed look at the "bold" argument provided by Google's Font API, which comes in handy for requesting and downloading the bold style of a specified font family. As with the "italic" option discussed in earlier chapters, the use of "bold" on web pages should be done with due caution and responsibility (or in other words, don't commit the cardinal sin of displaying all your HTML elements in bold!).

Finally, it's valid to note that the "bold" argument also has its own shorthand, "b," whose usage is very similar to its counterpart "i" (remember that one?). Thus, in the next tutorial I'm going to discuss how to use this shorthand, and illustrate my explanation with some easy-to-follow examples.

Don't miss the upcoming article!


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials