Home arrow HTML arrow Page 2 - Google Font API: Using the Bi Shorthand
HTML

Google Font API: Using the Bi Shorthand


In this penultimate part of the series, I take a detailed look at the “bi” shorthand included with the Google Font API. It can be used as a replacement for the “bolditalic” option covered in a previous article. Since the function of the suffix “bi” is nothing but to query the API using a shorter and more compact syntax, its implementation should be extremely straightforward.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 1
July 06, 2010
TABLE OF CONTENTS:
  1. · Google Font API: Using the Bi Shorthand
  2. · Review: the bolditalic argument
  3. · Introducing the bi shorthand
  4. · Including the CSS styles in an (X)HTML document

print this article
SEARCH DEVARTICLES

Google Font API: Using the Bi Shorthand - Review: the bolditalic argument
(Page 2 of 4 )

As I mentioned in the introduction, the Google Font API allows you to download at the same time the italic and bold styles of a font family via the handy “bolditalic” argument, thus avoiding the need to query the API with arguments that are a little bit verbose (if the term is really applicable). I covered the use of this argument in the previous chapter of this series, but if you missed that tutorial, below I listed the example created in that article. It shows how to use the pertinent argument in a simple fashion.

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

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

As you can see from the above example, the use of the “bolditalic” option is very simple to grasp. It only requires that you append the argument to the name of the requested font, separated by a colon (:) when querying the API. The following image shows the result when the option is applied to the H2 elements of the previous web page:

Undeniably, the “bolditalic” argument makes it extremely easy to request two different styles of a given font at the same time, but as I said in the introduction, it’s feasible to accomplish the same task in an even easier manner through the "bi" shorthand. If you’re interested in learning how to work with this shortened parameter, in the following section I’m going to rebuild the web page that you just saw, using this shorthand to define the visual presentation of its heading elements.

To learn the full details of this process, click on the link below and read the lines to come.


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