Home arrow HTML arrow Page 4 - Using the Google Font API`s Italic Option with Multiple Fonts
HTML

Using the Google Font API`s Italic Option with Multiple Fonts


In this third part of the series you will learn how to use the Google Font API for embedding into a web page the italicized versions of two different font families. The entire process is very simple, thanks to the flexibility offered by the API’s “italic” query string argument.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 2
June 21, 2010
TABLE OF CONTENTS:
  1. · Using the Google Font API`s Italic Option with Multiple Fonts
  2. · Review: using the italic argument of the Google Font API
  3. · Using the italic option with multiple font families
  4. · Binding the CSS styles to an (X)HTML document

print this article
SEARCH DEVARTICLES

Using the Google Font API`s Italic Option with Multiple Fonts - Binding the CSS styles to an (X)HTML document
(Page 4 of 4 )

Since my goal here is to provide you with a fully-functional example that shows how to display on the browser some heading elements and paragraphs in italic, below I coded for you a web page. It includes the set of CSS styles defined in the earlier segment. As you may guess, this web page is very similar to the ones created in previous parts of the series. Its source code is as follows:

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

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

<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> Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>

      </div>

</div>

</body>

</html>

If you wished to have at your disposal an example that lets you see clearly how to use the "italic" argument provided by Google's Font API with multiple font families, then the above should satisfy your expectations. In addition, the following image reproduces partially the output generated by the previous web page. Check it out:  

Needless to say, the "italic" option can be used with any number of fonts, and not only with the two that you saw before. However, if you're a conscientious web designer who knows how to build websites whose contents are readable and therefore accessible to most visitors, you'll use the option with caution.   

Final thoughts

In this third installment of the series you learned how to use the Google Font API for embedding into a web page the italicized versions of two different font families. As you saw before, the entire process was very simple, thanks to the flexibility offered by the API's "italic" query string argument.

It's fair to stress that the "italic" option can be used via a shorthand as well. You're wondering how this shorthand looks, right? Well, it's possible to pass to the API simply the "i" letter instead of the entire word "italic" to display a given font in its italic style. So, in the following tutorial I'm going to explain in detail how to use this handy shorthand, as usual through some approachable examples.

Don't miss the next part!


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