webRulon » Fonts

Use the Google Font API to Implement Awesome Fonts on your Website

admin — Wed, 11 Aug 2010 19:26:14 +0000

Until recently, the font-world has evolved slower than a dinosaur stuck in superglue. This holds especially true for people on the web, who have been stuck with the same old fonts(Arial, Georgia, Verdana, Times New Roman) since, well, forever.

The Google Font API is here to change all of that. At it’s heart, the Font API is a databaes of “web fonts.” Web Fonts are, obviously, fonts for use on the web. The Google system is so much more than that, though.

Today we are going to go over the basics of Google Font API and how to make the best of the service in order to assure your websites are maxed out with the best fonts available.

Implementing Google API requires no programming skills, however a basic grasp of html and web skills couldn’t hurt. If you lack even the rudimentary skills needed to implement the suite, then make a web-savvy friend do it for you. Offer them dinner or beer in exchange. It will take them only five minutes, promise.

How it works

Google Font API uses a CSS property called @font-face. Don’t worry if this is Greek to you. You don’t need to be well-versed in the nuances of CSS in order to navigate your way around Google API.

The property @font-face allows you to use font files. Font files typically come with the extensions .otf and .ttf. These may be familiar to you from programs as Photoshop and Microsoft Word. Font file extensions haven’t changed in a long, long time so chances are you are at least somewhat familiar.

The problem in the past has been that each particular browser were built to handle different font faces. For instance, Firefox only accepts .otf while Explorer only accepts .eot. Websites have been forced to scramble and invent workarounds on the fly that mock different extensions. It has been problematic at best. Google Font API has finally solved this problem.

The benefits

The obvious benefit is the implementation of web fonts is greatly simplified with using Google Fonts API. Obviously, there will be no more need to worry about the quirks of various browsers. API also works around tricky licensing issues regarding the legality of using certain fonts. This is because the fonts are open source and supplied by Google themselves. No more worries about using illegal fonts.

Also, did we mention it’s free? You don’t even have to enter an email address in order to use the service. There are reasons it is becoming the gold standard of the web-based font world.

How to use it

The font previewer now does a lot of this automatically so if you want you can skip below to that. However, for those interested parties, here is the nuts and bolts of how to use Google Font API.

There are two steps to get started.

What you want to do at first is reference the CSS stylesheet you need within your HTML document. Put this in the tags found around the top. Make sure this is in all the pages you want to use the API with. If you use a template such as Wordpress, you just have to do this once and the software will automatically import it across all of your pages. If not, you may have to go in there manually. Don’t worry. It won’t take too long.

Look at the example below. The tag is where you are referencing Google API. Note: Fontname is whatever font you wish to use in your page. Please replace with an actual font found in the Google Font Directory.

Home Page

/>

Step two is to use CSS to specify the use of the font we have just requested. If we want to use the mythical Fontname font on all of our pages, it would go something like this:

p {
font-family: 'FontName';
font-size: 12px;
}

See. Easy. You don’t really need to know anything about CSS in order to get it working. Just remember that Fontname is the name of the whatever font you choose and 12px is the size.

Multiple fonts

Let’s say you want to use more than one font on your page. You aren’t boring, after all! Here is what you do. Just append your request with an | symbol followed by another font name. Look at this example:

Do you see where you place words to italicize or make text bold? It’s really as simple as that. You aren’t missing anything.

Tools

There are a few handy tools for use with Google Font API.

Google Font Previewer

This lets you experiment with each font before you “commit” to adding them to your site. It truly is useful. It lets you adjust the size, the weight, the look, just about anything. Then, voila, it generates the necessary code you need to slap on your site. So, basically, the previewer allows you to ignore the tutorial we just laid out. Hey, it’s good to know how stuff works though, right?

Google Font Directory

The directory lists all of the fonts that Google has vetted that are available for use. It’s a good way to get a bead on what is out there so you can start planning your site accordingly. It also features the ability to snag the code for implementation. It’s a user-friendly experience that is designed to, of course, simplify things for web designers. Those crafty cads at Google, always making things easier!

Web Font Loader

This is for the experienced programmers out there. This is a JavaScript library that allows great flexibility and experimentation with fonts. If you need control over the fonts used in your webpage, then this is for you. Newbies, stay away.

That is it! Google Font API. It sounds useful doesn’t it? Head on over and give it a try. Your dusty old webpage will thank you.

34 Free and Elegant TrueType Mini-Pixel Fonts

admin — Wed, 28 Jul 2010 18:50:12 +0000

Small fonts are a conundrum. Once you go below the 9px mark, they tend to become unreadable. It’s at this point you need to call in the, um, “big” guns. Mini-pixel fonts. These handy and popular fonts have a variety of uses. They show up in Flash applications and various other webapps. Sadly, they are under-used throughout the rest of the web world. There is no denying these teeny fonts have an understated air of elegance about them, so why not break them out more?

They can also be a pain to find. Not all font collections include mini-pixel fonts in a blatant act of prejudiced against the vertically challenged. Little fonts big world, people. So we figured we’d do the sleuthing for you and collect them all here, for your perusal. Consider yourself covered whenever you need one of these fonts for a flash app or even a really teeny letter. Each entry includes the size and a sample of the font. Enjoy.