Using Google Font API
June 4, 2010 by daynah
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:
CSS 3: Substring Matching Attribute Selectors
March 16, 2007 by daynah
Filed under Code Snippets, CSS, Tips and Tutorials
I 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 — 
) and open it up in Firefox 2.0. You will then see something that looks like this:
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.
@
