Home arrow HTML arrow Page 2 - 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 - Review: using the i shorthand for italics
(Page 2 of 4 )

In case you haven't read the tutorial that preceded this one, where I explained in detail how to work with the "i" shorthand offered by the Google Font API, below I reintroduced that article's example. It shows how to use the pertinent shorthand for requesting the italic style of a specified font family. Here's how the example was defined:

<!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 i option)</title>

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Cantarell:i|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. Etiammassalibero, 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. Etiammassalibero, 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. Etiammassalibero, 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>

From the previous code fragment, it's clear to see that using the "i" shorthand for downloading the italicized version of a given font family is a straightforward process. In this particular case, the shorthand has been bound to a single font, but it's possible to use it with multiple typefaces at the same time.

Also, if the earlier code snippet doesn't completely explain how to use the "i" option, here's a complementary image that shows part of the output generated by the snippet when rendered by the browser. Check it out:

That looks pretty good, right? Considering that styling the heading elements and paragraphs of the previous web page only required you to pass the letter "i" in the query string, the result is more than acceptable for demonstrative purposes.

But as I stated in the introduction, it's also feasible to instruct the Font API to  deliver only the bold style of a specific font via the "bold" argument. However, the full details regarding the use of this new option will be discussed in the following section, so jump forward and read the next few lines.


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