Home arrow HTML arrow Page 4 - Google Font API: Requesting a Bold Font Style Using a Numeric Notation
HTML

Google Font API: Requesting a Bold Font Style Using a Numeric Notation


If you’re a web designer who wants to take full advantage of the functionality offered by the brand new web service implemented by Google, that is the already popular Font API, then this article series might be the material that you’re looking for. It shows you how to work with the API’s most relevant features. In this ninth (and final) article of the series, you'll learn another way to get the bold version of a font.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 5
July 07, 2010
TABLE OF CONTENTS:
  1. · Google Font API: Requesting a Bold Font Style Using a Numeric Notation
  2. · Review: the shorthand bi
  3. · Downloading a bold font style via a numeric notation
  4. · Embedding the previous CSS styles into a web page

print this article
SEARCH DEVARTICLES

Google Font API: Requesting a Bold Font Style Using a Numeric Notation - Embedding the previous CSS styles into a web page
(Page 4 of 4 )

If you’re interested in using a numeric syntax when downloading the bold version of a font family, hopefully you’ll find the following example educational. It binds the group of CSS styles defined in the preceding segment to the markup of a basic web page. Check it out:  

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

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

Done. At this point, it’s clear to see that the Google Font API offers a very flexible model, especially when it comes to requesting bold font styles, since it allows you to performs this task by using either some keywords like “bold” and “bi” or the numeric syntax that you learned before. Again, which approach you use depends on your personal preferences.

And with this last example, I’m finishing this humble overview of Google’s Font API. As always, feel free to edit all of the code samples shown in this article. Doing so will surely help you to more easily master many of the features offered by this useful web service. 

Final thoughts

How time flies! In the flicker of an eye we’ve come to the end of the series. There’s no need to feel sad, though, since you should now understand how to use the most relevant features that come packaged with the Google Font API.

While the service is still in its beta version (at lest at the time of this writing), hopefully in the near future the number of commercial fonts available for download will grow, as Google reaches new agreements with other font foundries. Meanwhile, I encourage you to start using the API in its current state, especially if you’re interested in giving your web pages a fresh look using commercial typefaces other than the ones that you utilize in your daily work.


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