Using Google Font API

June 4, 2010 by  
Filed under Code Snippets, Google, Links and Resources

One thing I learned at Google I/O that I thought was fun and exciting was their new Google Font API. What does this mean? It means I don’t have to add text to images using Photoshop anymore. I can just add it directly to the HTML code as plain text and it’ll look beautiful on the page.

This will (1) speed up page loads because text loads faster than images and (2) make the page more accessible (screen readers won’t need to piece together alt tags of images; instead, it’ll just read the text directly off the page. (3) The more text you have on a page, the more SEO-friendly it is.

Lucky for us, adding Google fonts to our webpage is quite easy. All you need is to know a bit of CSS and HTML, and how to copy and paste!

Step 1: Select Font

Go to the Google font directory and choose a font you would like to use. In the sample below, I picked the “Lobster” font.

Step 2: Get the Code

If you like the font, tab over to “Get the Code.” From there, you will get a sample code like this:

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'></link>

To include the code into your page, simply copy and paste this code into the header of your HTML page.

If you prefer to include the font it into your CSS stylesheet instead of your HTML header, you can use a code like this instead:

@import url("http://fonts.googleapis.com/css?family=Lobster");

Step 3: Add some style!

Now that you have your font embedded onto your page, it’s time to give it some style. Create a CSS class and add in your font.

In this sample, I created a class called “prettyFont” and made it use the “Lobster” font to display, in huge red font. The alternative “arial and serif” font were added as a backup in case Google Font API was down; these web-safe fonts will display instead of Lobster in that case.

.prettyFont { font-family: 'Lobster', arial, serif; font-size: 3em; color:red; }

That’s pretty much it! Adding Google Fonts to your page is as simple as 1-2-3! You can also go even more wild and add shadows, shading, and anything else you can do with HTML + CSS.

For more information, see the Google Font API documentation. For more sample codes, check out Getting Started with Google Font API. And if you want to dive in deeper and add in italic, bold, and bold italic fonts, see their further reading section.

Related Products:

Web Design with HTML, CSS, JavaScript and jQuery SetWeb Design with HTML, CSS, JavaScript and jQuery SetA two-book set for web designers and front-end developers

This two-book set combines the titles HTML & CSS: Designing and Building Web Sites and Ja... Read More >

HTML5 Pocket Reference: Quick, Comprehensive, Indispensable (Pocket Reference (O'Reilly))HTML5 Pocket Reference: Quick, Comprehensive, Indispensable (Pocket Reference (O'Reilly))

Need help finding the right HTML5 element or attribute for your web page or application? HTML5 Pocket Reference is the classic reference that web d... Read More >

Html Guide (Quick Study Computer)Html Guide (Quick Study Computer)Covers basic information developed for Hypertext Mark-up Language, version 4.


Chart includes detailed information on:
· c... Read More >

CSS 3: Substring Matching Attribute Selectors

March 16, 2007 by  
Filed under Code Snippets, CSS, Tips and Tutorials

css-iconI was reading up on CSS 3′s Substring matching attribute selectors and discovered a fun way to reference anchor links!

Web links can be a variety of files. PDF, DOC, and HTML are some of the familiar ones. I was wondering if we could put a small icon to denote what type of file is being downloaded, and with CSS3, it’s quite possible.

Create an HTML file. Between the <head> tags, put

<style>
body { 
  font-size: .9em; font-weight: bold; 
}
a { color: blue; line-height: 1.5em; }
a[href$=".html"] { 
   padding-left:20px; background-image:url(html.gif); 
   background-repeat: no-repeat; 
}
a[href$=".pdf"] { 
   padding-left:20px; background-image:url(pdf.gif); 
   background-repeat: no-repeat; 
}
a[href$=".doc"] { 
   padding-left:20px; background-image:url(msword.gif); 
   background-repeat: no-repeat; 
}
</style>

and between the <body> tags, put:

<ul>
<li><a href="myfile.html">My HTML File</a></li>
<li><a href="myfile.pdf">My PDF File</a></li>
<li><a href="myfile.doc">My Word Doc File</a></li>
<li><a href="http://php-princess.net">Any Link</a></li>
</ul>

Save the file as mytest.html (and download these three images as well — MS Word PDF HTML) and open it up in Firefox 2.0. You will then see something that looks like this:

CSS 3 Links
Isn’t that great? The padding attribute moves the link 20px to the right. And the background-repeat attribute makes sure that image doesn’t repeat. So when I link a PDF file on my website, an image of a PDF file automatically shows next to the link. What a time-saver. :) The only drawback to this is that CSS3 isn’t fully implemented in all of today’s browser. It seems that Firefox 2.0 is ahead in the game. MSIE 7.0 and browsers below do not render CSS3 correctly. But it is a nice tip. Hopefully the next generation of browsers will render CSS3 the way it’s suppose to.

Related Products:

Web Design with HTML, CSS, JavaScript and jQuery SetWeb Design with HTML, CSS, JavaScript and jQuery SetA two-book set for web designers and front-end developers

This two-book set combines the titles HTML & CSS: Designing and Building Web Sites and Ja... Read More >

Code: The Hidden Language of Computer Hardware and SoftwareCode: The Hidden Language of Computer Hardware and Software

What do flashlights, the British invasion, black cats, and seesaws have to do with computers? In CODE, they show us the ingenious ways we manipulat... Read More >

CSS: The Missing ManualCSS: The Missing Manual

CSS lets you create professional-looking websites, but learning its finer points can be tricky—even for seasoned web developers. This fully updat... Read More >